/* 見た目B（スクショの形）。色は body.dark でダークに切り替える */
body {
  --g-bg: #f6f8fc; --g-card: #ffffff; --g-gap: #f6f8fc; --g-text: #1f1f1f; --g-sub: #444746;
  --g-search: #e9eef6; --g-dot: #0b57d0; --g-fab: #c2e7ff; --g-fab-t: #001d35;
  --g-chip: #c2e7ff; --g-chip-t: #001d35; --g-drawer: #ffffff; --g-sel: #d3e3fd; --g-sel-t: #041e49;
  --g-line: #e1e3e1; --g-nav-on: #c2e7ff; --g-nav-ic: #001d35; --g-badge: #b3261e; --g-badge-t: #ffffff;
  --g-social: #0b57d0; --g-social-bg: #d3e3fd; --g-promo: #146c2e; --g-promo-bg: #c4eed0;
  --g-info: #b06000; --g-info-bg: #ffdeac; --g-star: #444746; --g-label: #e1e3e1;
  --g-dbg: #ffffff; --g-dcard: #f0f4f9; --g-lbl: #d3e3fd; --g-lbl-t: #0842a0; --g-link: #0b57d0; --g-pill: #c2e7ff; --g-pill-t: #001d35;
}
body.dark {
  --g-bg: #1b1b1d; --g-card: #202124; --g-gap: #141416; --g-text: #e3e3e3; --g-sub: #c4c7c5;
  --g-search: #303134; --g-dot: #a8c7fa; --g-fab: #0b47b5; --g-fab-t: #d3e3fd;
  --g-chip: #004a77; --g-chip-t: #c2e7ff; --g-drawer: #28292c; --g-sel: #601410; --g-sel-t: #f2b8b5;
  --g-line: #3c3d40; --g-nav-on: #004a77; --g-nav-ic: #c2e7ff; --g-badge: #f2b8b5; --g-badge-t: #601410;
  --g-social: #7cacf8; --g-social-bg: #0b3a66; --g-promo: #6dd58c; --g-promo-bg: #0f3d1d;
  --g-info: #fdd663; --g-info-bg: #4a2c00; --g-star: #c4c7c5; --g-label: #3c3d40;
  --g-dbg: #131314; --g-dcard: #1e1f20; --g-lbl: #0842a0; --g-lbl-t: #d3e3fd; --g-link: #a8c7fa; --g-pill: #7fcfff; --g-pill-t: #002a45;
}

.screen.g { background: var(--g-gap); color: var(--g-text); font-family: "Google Sans", Roboto, -apple-system, "Hiragino Sans", sans-serif; }
.g svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.g svg.fill { fill: currentColor; stroke: none; }
.g-nav-mail svg.fill { fill: none; stroke: currentColor; }
.g-ic { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--g-sub); flex: 0 0 auto; }

/* 上の検索の帯 */
.g-top { padding: calc(var(--top) + 8px) 12px 10px; background: var(--g-gap); }
.g-search { height: 56px; border-radius: 28px; background: var(--g-search); display: flex; align-items: center; padding: 0 8px 0 6px; gap: 6px; }
.g-search-text { flex: 1; font-size: 17px; color: var(--g-sub); }
.g-prof { width: 36px; height: 36px; border-radius: 50%; background: #7b5e57 center / cover; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; margin-right: 4px; }

/* 一覧（角丸のカードを細い隙間で積む） */
.g-list { list-style: none; margin: 0 10px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.g-list li { background: var(--g-card); display: flex; gap: 14px; padding: 14px 14px 14px 16px; position: relative; }
.g-list li:first-child { border-radius: 22px 22px 6px 6px; }
.g-list li:last-child { border-radius: 6px 6px 22px 22px; }
.g-list li:only-child { border-radius: 22px; }
.g-list li:active { filter: brightness(1.15); }
.g-av { flex: 0 0 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; background: center / cover; overflow: hidden; }
.g-av svg { width: 100%; height: 100%; }
.g-main { flex: 1; min-width: 0; }
.g-r1 { display: flex; align-items: baseline; gap: 6px; }
.g-name { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-count { font-size: 14px; color: var(--g-sub); }
.g-r1 .sp { flex: 1; }
.g-time { font-size: 14px; color: var(--g-sub); white-space: nowrap; }
.g-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--g-dot); margin-left: 6px; align-self: center; }
.g-subj { font-size: 16px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 30px; }
.g-prev { font-size: 15px; color: var(--g-sub); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 34px; }
.unread .g-name, .unread .g-subj, .unread .g-time { font-weight: 700; color: var(--g-text); }
.g-li-star { position: absolute; right: 14px; bottom: 12px; color: var(--g-star); }
.g-li-star.on { color: #f4b400; }
.g-li-star.on svg { fill: #f4b400; stroke: #f4b400; }
.g-code { display: inline-block; margin-top: 8px; padding: 8px 16px; border-radius: 20px; background: var(--g-chip); color: var(--g-chip-t); font-size: 16px; font-weight: 500; }
.g-clip { display: inline-flex; margin-top: 8px; padding: 5px 12px 5px 8px; border: 1px solid var(--g-line); border-radius: 16px; font-size: 13px; color: var(--g-sub); align-items: center; gap: 4px; }
.g-clip svg { width: 16px; height: 16px; color: #e5484d; }

/* 分類の行（ソーシャル・プロモーションなど） */
.g-cat .g-av { background: none; }
.g-cat .g-av svg { width: 30px; height: 30px; }
.g-cat .g-name { font-weight: 700; }
.g-cat .g-subj { font-weight: 700; color: var(--g-text); }
.g-badge { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); padding: 4px 12px; border-radius: 14px; font-size: 14px; font-weight: 500; }
.k-social { color: var(--g-social); } .k-social .g-badge, .g-dlist .k-social { background: var(--g-social-bg); color: var(--g-social); }
.k-promo { color: var(--g-promo); } .k-promo .g-badge, .g-dlist .k-promo { background: var(--g-promo-bg); color: var(--g-promo); }
.k-info { color: var(--g-info); } .k-info .g-badge, .g-dlist .k-info { background: var(--g-info-bg); color: var(--g-info); }
.g-cat.k-social .g-av, .g-cat.k-promo .g-av, .g-cat.k-info .g-av { color: inherit; }
.g-cat .g-main { padding-right: 110px; }
.g-pad { height: 120px; }

/* 作成ボタンと下の帯 */
.g-fab { position: absolute; right: 18px; bottom: calc(var(--bottom) + 84px); height: 58px; padding: 0 22px 0 18px; border-radius: 18px; background: var(--g-fab); color: var(--g-fab-t); display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 500; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.g-nav { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--bottom) + 72px); padding-bottom: var(--bottom); background: var(--g-gap); display: flex; justify-content: space-around; align-items: center; }
.g-nav-mail { position: relative; width: 64px; height: 34px; border-radius: 17px; background: var(--g-nav-on); color: var(--g-nav-ic); display: flex; align-items: center; justify-content: center; }
.g-nav-badge { position: absolute; left: 34px; top: -8px; padding: 1px 8px; border-radius: 10px; background: var(--g-badge); color: var(--g-badge-t); font-size: 12px; white-space: nowrap; }
.g-nav-badge:empty { display: none; }
.g-nav-video { color: var(--g-sub); }

/* 開いたメール */
#gDetail { background: var(--g-dbg); }
.g-dbar { padding: calc(var(--top) + 4px) 6px 4px; display: flex; align-items: center; gap: 10px; }
.g-dbar .g-ic { color: var(--g-text); }
.g-dbar #gBack svg { width: 30px; height: 30px; }
.g-dbar-sp { flex: 1; }
.g .dotfill { fill: currentColor; stroke: none; }
.g-subj-row { display: flex; align-items: center; gap: 10px; padding: 14px 18px 20px 30px; }
.g-subj-row .g-subj { flex: 1; white-space: normal; font-size: 29px; font-weight: 400; line-height: 1.42; margin: 0; padding: 0; overflow: visible; color: var(--g-text); }
.g-label { display: inline-block; vertical-align: 4px; font-size: 16px; line-height: 1; padding: 6px 6px; border-radius: 5px; background: var(--g-lbl); color: var(--g-lbl-t); margin-left: 4px; }
.g-star { color: var(--g-star); }
.g-star svg { width: 28px; height: 28px; }
.g-star.on svg { fill: #f4b400; stroke: #f4b400; }
.g-card { margin: 0 10px; background: var(--g-dcard); border-radius: 28px; padding: 12px 0 8px; }
.g-sender { display: flex; align-items: flex-start; gap: 4px; padding: 6px 4px 4px 18px; }
.g-sender .g-av { flex-basis: 48px; height: 48px; font-size: 22px; margin-right: 12px; margin-top: 2px; }
.g-sender .g-ic { width: 46px; }
.g-sender-t { flex: 1; min-width: 0; }
.g-dname { display: flex; align-items: center; gap: 8px; min-width: 0; }
.g-dfrom { font-size: 17px; color: var(--g-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.g-verified { display: none; flex: 0 0 auto; }
.g-verified.on { display: inline-flex; }
.g-verified svg { width: 20px; height: 20px; }
.g-verified .seal { fill: #7cacf8; stroke: none; }
.g-verified .chk { fill: none; stroke: var(--g-dcard); stroke-width: 2.4; }
.g-dtime { font-size: 16px; color: var(--g-sub); margin-top: 2px; }
.g-dto { font-size: 16px; color: var(--g-sub); margin-top: 8px; display: flex; align-items: center; gap: 4px; }
.g-dto svg.tiny { width: 18px; height: 18px; }
.g-dcode:empty { display: none; }
.g-dcode { margin: 10px 20px 0; }
.g-body { padding: 16px 20px 18px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-all; color: var(--g-text); -webkit-user-select: text; user-select: text; }
.g-body a { color: var(--g-link); text-decoration: underline; }
.g-attach:empty { display: none; }
.g-attach { margin: 0 20px 14px; border: 1px solid var(--g-line); border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.g-attach .file { width: 26px; height: 32px; border-radius: 3px; background: #e5484d; color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; }
.g-dpad { height: calc(var(--bottom) + 110px); }
.g-dfoot { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 10px calc(var(--bottom) + 10px); display: flex; gap: 10px; align-items: center; background: linear-gradient(transparent, var(--g-dbg) 30%); }
.g-bigpill { flex: 1; height: 54px; border-radius: 27px; background: var(--g-pill); color: var(--g-pill-t); display: flex; align-items: center; justify-content: center; gap: 22px; font-size: 18px; }
.g-roundbtn { flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--g-pill); color: var(--g-pill-t); display: flex; align-items: center; justify-content: center; }
.g-roundbtn svg { width: 22px; height: 22px; }

/* 左のメニュー */
.g-drawer-wrap { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.g-shade { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .3s; }
.g-drawer { position: absolute; left: 0; top: 0; bottom: 0; width: 82%; background: var(--g-drawer); color: var(--g-text); transform: translateX(-100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); overflow-y: auto; padding-top: calc(var(--top) + 30px); font-family: "Google Sans", Roboto, -apple-system, "Hiragino Sans", sans-serif; }
.g-drawer-wrap.open { pointer-events: auto; }
.g-drawer-wrap.open .g-shade { opacity: 1; }
.g-drawer-wrap.open .g-drawer { transform: none; }
.g-account { font-size: 24px; font-weight: 500; padding: 0 0 28px 88px; }
.g-dlist { list-style: none; margin: 0; padding: 0 8px 40px 0; }
.g-dlist li { display: flex; align-items: center; height: 58px; padding: 0 16px 0 28px; border-radius: 0 29px 29px 0; font-size: 18px; gap: 26px; }
.g-dlist li svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--g-sub); flex: 0 0 auto; }
.g-dlist li .t { flex: 1; }
.g-dlist li .n { font-size: 15px; color: var(--g-sub); }
.g-dlist li .n.k-social, .g-dlist li .n.k-promo, .g-dlist li .n.k-info { padding: 3px 10px; border-radius: 14px; font-weight: 500; }
.g-dlist li.sel { background: var(--g-sel); color: var(--g-sel-t); margin-left: 10px; padding-left: 18px; border-radius: 29px; }
.g-dlist li.sel svg, .g-dlist li.sel .n { color: var(--g-sel-t); }
.g-dlist li.line { height: 1px; padding: 0; margin: 8px 0; background: var(--g-line); border-radius: 0; }

/* 見た目ごとに編集の項目を出し分ける */
body.look-ios .only-g, body.look-g .only-ios { display: none !important; }
#mailEd.cat .only-mail, #mailEd:not(.cat) .only-cat { display: none; }
.img-row { display: flex; align-items: center; gap: 10px; background: var(--bg); padding: 10px 12px; border-radius: 10px; margin: 10px 0; font-size: 15px; }
.img-row span { flex: 1; }
.img-prev { width: 40px; height: 40px; border-radius: 50%; background: var(--bg2) center / cover; }
.ed-small { padding: 7px 12px; border-radius: 8px; background: var(--bg2); color: var(--blue); font-size: 14px; }
.counts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.counts label { margin: 0; }
.colors { display: flex; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.colors button { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; }
.colors button.on { border-color: var(--text); }
.seg { flex-wrap: wrap; }
body.still .g-drawer, body.still .g-shade { transition: none; }
.g-cat .g-name { color: var(--g-text); }
.g-dlist li { font-size: 17px; gap: 22px; }
.g-dlist li .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-dlist li .n.k-social, .g-dlist li .n.k-promo, .g-dlist li .n.k-info { font-size: 13px; padding: 3px 8px; }

/* To を押すと開く詳しい欄 */
.g-dto { cursor: pointer; }
.g-dto svg.tiny { transition: transform .2s; }
.g-card.info-open .g-dto svg.tiny { transform: rotate(180deg); }
.g-info { display: none; margin: 12px 18px 4px; padding: 10px 16px; border-radius: 22px; background: var(--g-info-box); }
.g-card.info-open .g-info { display: block; }
.g-info .r { display: flex; gap: 12px; padding: 13px 0; font-size: 15px; color: var(--g-sub); align-items: center; }
.g-info .k { flex: 0 0 82px; }
.g-info .v { flex: 1; min-width: 0; word-break: break-all; line-height: 1.6; }
.g-info .lnk { color: var(--g-link); }
.g-info svg.lock { width: 20px; height: 20px; }
.g-unsub { color: var(--g-link); font-size: 16px; padding: 10px 10px 0; white-space: nowrap; }
.g-card:not(.unsub) .only-unsub, .g-card.unsub .no-unsub { display: none; }
.g-card.unsub .g-dname .g-dfrom { color: var(--g-text); font-weight: 700; }
body { --g-info-box: #e9eef6; }
body.dark { --g-info-box: #28292c; }