/* v8.9 — 포털 · 글래스(투명 유리) + 고급 일러스트풍 아이콘
   · 카드/타일: 은은한 반투명 유리 + 안쪽 하이라이트 + 블러 (글씨 색 · 크기는 그대로라 가독성 유지)
   · 아이콘: 색이 번지는 유리 알약 위에 "면(.f) + 선" 두 겹 일러스트. 밝은 화면에서도 선은 진한 색.
   --mc 는 각 타일의 대표색 (portal.html 의 .tile.xxx / .a-xxx 규칙이 정함) */

/* ---- 아이콘 알약 ---- */
.tile .ticon, .acard .ac-ic, .bulbtn .bi, .mcardlink .mi {
  background:
    radial-gradient(120% 120% at 18% 8%, color-mix(in srgb, var(--mc, #F26B21) 42%, transparent), color-mix(in srgb, var(--mc, #F26B21) 12%, transparent) 70%),
    rgba(255,255,255,.04);
  border: 1px solid color-mix(in srgb, var(--mc, #F26B21) 46%, rgba(255,255,255,.22));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -6px 10px -6px rgba(0,0,0,.25), 0 8px 18px -8px color-mix(in srgb, var(--mc, #F26B21) 85%, transparent);
  color: color-mix(in srgb, var(--mc, #F26B21) 70%, #fff);
}
.tile .ticon { width: 46px; height: 46px; border-radius: 15px; }
.tile .ticon svg { width: 25px; height: 25px; }
.acard .ac-ic { width: 34px; height: 34px; border-radius: 11px; }
.acard .ac-ic svg { width: 19px; height: 19px; }
.bulbtn .bi { width: 40px; height: 40px; border-radius: 13px; --mc: #F26B21; color: #fff; }
.bulbtn .bi svg { width: 23px; height: 23px; }
.bulbtn.in .bi { background: linear-gradient(145deg, #FF9A57, #E5651F); border-color: rgba(255,255,255,.4); }
.prebtns .bulbtn.nf .bi { background: radial-gradient(120% 120% at 18% 8%, rgba(255,255,255,.42), rgba(255,255,255,.12) 70%); border-color: rgba(255,255,255,.4); }
/* 면(.f) — 은은하게 채운 층 (선 아래에 깔림) */
.ticon svg .f, .ac-ic svg .f, .bi svg .f, .mi svg .f { fill: currentColor; fill-opacity: .26; stroke: none; }
.ticon svg, .ac-ic svg, .bi svg, .mi svg { filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.28)); }
.tile:hover .ticon, .acard:hover .ac-ic { transform: translateY(-1px); }
.tile .ticon, .acard .ac-ic { transition: transform .15s; }

/* ---- 유리 타일 (어두운 화면) ---- */
html:not([data-theme="light"]) body .tiles:not(.adm) .tile,
html:not([data-theme="light"]) body .fmbtn, html:not([data-theme="light"]) body .cabtn {
  background: linear-gradient(155deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 26px rgba(0,0,0,.30);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
}
html:not([data-theme="light"]) body .tiles:not(.adm) .tile:hover { background: linear-gradient(155deg, rgba(255,255,255,.17), rgba(255,255,255,.06)); border-color: rgba(255,255,255,.26); }
html:not([data-theme="light"]) body .bulbtn:not(.in):not(.nf) {
  background: linear-gradient(155deg, rgba(255,255,255,.11), rgba(255,255,255,.04)) !important; border: 1px solid rgba(255,255,255,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 26px rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
}
html:not([data-theme="light"]) body .prebtns .bulbtn.nf { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 12px 28px rgba(210,81,31,.32); }
html:not([data-theme="light"]) body .acard { background: linear-gradient(155deg, rgba(255,255,255,.10), rgba(255,255,255,.035)); border-color: rgba(255,255,255,.15); box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 10px 26px rgba(0,0,0,.30); }
html:not([data-theme="light"]) body .hero { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 14px 34px rgba(0,0,0,.34); }

/* ---- 밝은 화면: 선은 진한 대표색, 알약은 밝은 유리 ---- */
html[data-theme="light"] .tile .ticon, html[data-theme="light"] .acard .ac-ic, html[data-theme="light"] .mcardlink .mi {
  background: radial-gradient(120% 120% at 18% 8%, color-mix(in srgb, var(--mc, #0B6E77) 24%, #fff), color-mix(in srgb, var(--mc, #0B6E77) 8%, #fff) 72%);
  border-color: color-mix(in srgb, var(--mc, #0B6E77) 32%, #fff);
  box-shadow: inset 0 1px 0 #fff, 0 6px 14px -8px color-mix(in srgb, var(--mc, #0B6E77) 70%, transparent);
  color: color-mix(in srgb, var(--mc, #0B6E77) 88%, #000);
}
html[data-theme="light"] .ticon svg, html[data-theme="light"] .ac-ic svg, html[data-theme="light"] .bi svg { filter: none; }
html[data-theme="light"] body .bulbtn:not(.nf) .bi { background: linear-gradient(145deg, #F59A5E, #E5651F) !important; color: #fff; border-color: rgba(255,255,255,.7); }
html.eq-embed .ticon { box-shadow: none; }

/* '보고 독촉 · 알림' 카드 대표색 (알림 · 이메일 관리를 합친 카드) */
.tile.a-rem, .acard.a-rem { --mc: #F0A3B4; --mc-soft: rgba(240,163,180,.16); }
.acard.a-word { --mc: #C9A0F0; --mc-soft: rgba(201,160,240,.16); }
.acard.a-equip { --mc: #FFA24D; --mc-soft: rgba(255,162,77,.17); }

/* v8.11 — 📘 사용 설명서 타일 (청록) */
.tile.manual { --mc: #2A8C94; --mc-soft: rgba(42,140,148,.14); }
#dash .tile.manual { --mc: #5FD0D8; --mc-soft: rgba(95,208,216,.17); }