/* =====================================================================
   教材导航落地页 · 童话主题适配层（2026-09-15）
   ---------------------------------------------------------------------
   服务页面：units/36_all.html（外研版 / 人教版 两卡入口）
             结构相同的 units/36pep_all.html 亦可直接复用本表
   底座：comm/disney-kit.css（令牌 + 材质配方）
   挂载：页面 <head> 里加两行
         <link rel="stylesheet" href="/comm/disney-kit.css">
         <link rel="stylesheet" href="/units/36all-disney.css">
   回滚：删掉那两行 <link> 即可，页面自带的 <style> 一行未动。
   ---------------------------------------------------------------------
   本页结构：body > .container > .grid-container > a.grid-item
             每卡：.icon-wrapper（圆徽）+ .text + .sub-text + .sub-title
   材质：外壳=晨光天空+极光斑；卡片=象牙故事书页（顶内高光+底挤塑边+落地影）；
         圆徽=挤塑玩具钮（按下下沉）；「词老大学员专用」=金色塑料小徽章。
   红线：① 不在主题层写尺寸（.icon-wrapper 的宽高由页面自带的
           @media 600/400 响应式决定），SVG 用百分比随盒缩放；
         ② 品牌色（外研红 / 人教绿）保留 —— 它是刻意的区分色，
          只把色值对齐 kit 的挤塑配方。
   ===================================================================== */

/* ============ 1. 外壳：晨光天空 ============ */
/* body 原表 min-height:100vh + padding:20px，本项目无全局 box-sizing
   （content-box）→ 文档恒定多出 40px 空白滚动。改成 border-box 消除。 */
html{ background:var(--dk-sky-4); }
body{
  box-sizing:border-box !important;
  min-height:100vh !important;
  background-color:var(--dk-sky-2) !important;
  background-image:
    radial-gradient(56% 38% at 88% -6%, rgba(185,164,255,.40), rgba(185,164,255,0) 72%),
    radial-gradient(46% 34% at -10% 20%, rgba(127,230,207,.34), rgba(127,230,207,0) 72%),
    radial-gradient(44% 30% at 108% 66%, rgba(255,194,166,.34), rgba(255,194,166,0) 74%),
    radial-gradient(48% 34% at 2% 104%, rgba(255,223,142,.36), rgba(255,223,142,0) 74%),
    linear-gradient(180deg,var(--dk-sky-1) 0%,var(--dk-sky-2) 32%,var(--dk-sky-3) 66%,var(--dk-sky-4) 100%) !important;
  background-attachment:fixed;
  color:var(--dk-ink) !important;
  font-family:var(--dk-font-cn) !important;
}

/* ============ 2. 卡片：象牙故事书页 ============ */
.grid-item{
  background:var(--dk-page-bg) !important;
  border-radius:var(--dk-r-page) !important;
  color:var(--dk-ink) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.85),
    var(--dk-ring),
    inset 0 -3px 0 var(--dk-lip),
    var(--dk-cast) !important;
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease !important;
}
.grid-item:hover{
  transform:translateY(-5px) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.85),
    var(--dk-ring),
    inset 0 -3px 0 var(--dk-lip),
    0 22px 36px -18px rgba(78,54,155,.42) !important;
}
.grid-item:active{ transform:translateY(-1px) !important; }

/* 品牌侧边：色值对齐 kit 的挤塑配方（外研红 / 人教绿），宽度与圆角照旧 */
.grid-item:nth-child(1){ border-left-color:var(--dk-no-hi) !important; }
.grid-item:nth-child(2){ border-left-color:var(--dk-ok-hi) !important; }

/* 小屏：卡片 aspect-ratio 0.9 是固定盒（168×186），外研卡内容 ~216px
   会被 overflow:hidden 裁底 → 放开比例让内容自然撑高（桌面 1:1 方卡保留） */
@media (max-width:600px){
  .grid-item{ aspect-ratio:auto !important; }
  /* 窄屏：两卡并排时收紧凑（宽度 < 高度会被看成"上下竖条"），
     收缩圆徽下距与金色徽章上距，让卡片高度贴近宽度、更像按钮。 */
  .grid-container{ gap:12px !important; align-items:stretch !important; }
  .icon-wrapper{ margin-bottom:12px !important; }
  .sub-title{ margin-top:10px !important; }
}
@media (max-width:400px){
  .icon-wrapper{ margin-bottom:10px !important; }
  .sub-title{ margin-top:8px !important; }
}

/* ============ 3. 圆徽：挤塑玩具钮（尺寸交给页面自带的响应式） ============ */
/* flex 列容器隐形缩水（kit 盒模型清单记录过的坑）：外研卡有金色徽章多一行，
   390px 下圆徽被压成 60×38 —— 禁止参与收缩 */
.icon-wrapper{
  flex-shrink:0 !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.42),
    inset 0 -3px 0 rgba(0,0,0,.22),
    0 3px 0 var(--dk-badge-lip),
    var(--dk-halo) !important;
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease !important;
}
.grid-item:nth-child(1) .icon-wrapper{
  background:linear-gradient(180deg,#e8546c 0%,var(--dk-no-hi) 54%,var(--dk-no) 100%) !important;
  --dk-badge-lip:#7d0f24;
}
.grid-item:nth-child(2) .icon-wrapper{
  background:linear-gradient(180deg,#2aa87c 0%,var(--dk-ok-hi) 54%,var(--dk-ok) 100%) !important;
  --dk-badge-lip:#04402e;
}
.grid-item:hover .icon-wrapper{ transform:scale(1.07) !important; }
.grid-item:active .icon-wrapper{
  transform:translateY(3px) scale(1) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.3),
    inset 0 -2px 0 rgba(0,0,0,.24),
    0 1px 0 var(--dk-badge-lip) !important;
}
/* SVG 用百分比随盒缩放：小屏页面把盒缩到 70/60px 时图标跟着缩 */
.icon-wrapper svg{
  width:46% !important; height:46% !important;
  display:block;
  filter:drop-shadow(0 1px 1px rgba(40,10,110,.35));
}

/* ============ 4. 文案 ============ */
.text{
  color:var(--dk-ink-strong) !important;
  font-weight:800 !important;
  letter-spacing:.5px;
}
.sub-text{ color:var(--dk-ink-mute) !important; font-weight:600; }
/* 「词老大学员专用」：原 #ff9933 压象牙纸只有 2.2:1（小字不合格），
   改成金色塑料小徽章 —— 墨色取 kit 的 --dk-gold-ink，压金底 5.2:1 起 */
.sub-title{
  display:inline-block;
  margin-top:14px !important;
  padding:4px 12px;
  border-radius:999px;
  background:var(--dk-gold-plastic);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 2px 0 var(--dk-gold-lip),
    0 6px 12px -8px rgba(140,92,10,.5);
  color:var(--dk-gold-ink) !important;
  font-weight:800 !important;
  letter-spacing:.3px;
}