/* 桌上那张 A4 简历纸（room/js/paper-a4.js 的样式）。
   贴在 CSS3D 场景里的真实纸面上：不用 fixed / vw / vh / backdrop-filter，
   悬停提示一律绝对定位在 .a4-hot 内部，不会跑出 794px 纸面。
   全部尺寸按 定稿/公众号说明版/国内达人运营实习/预览.png（953×1348）量出来再换算到 794×1123：
   页边 16px、正文 10pt=13.3px、行距 17.1px、分节标签 22px 高带斜角与横线、证件照 117×108 距右 96px。 */

.a4{
 --a4-fs:13.3px;        /* 正文 10pt */
 --a4-lh:17.5px;        /* 行距。原 16.9（量自预览图 20.5 原始像素 × 0.833）；2026-09-22 与 PDF 一起把正文行距放大 1.05 倍，让内容均匀铺满一页、底部不留大空白 */
 --a4-gap:9.5px;        /* 分节之间的间距（上一节末行到下一枚标签）。PDF 里所有分节前的空段统一为 5.8pt 段前 + 2pt 行高，页眉到「教育背景」也是同一个空段，所以间距天然一致 */
 --a4-hot:78,154,120;   /* 交互态绿（room.css 的 --green） */
 --a4-blue:#264d76;--a4-blue-ink:#1f4e79;--a4-gold:#b8952e;--a4-gray:#8f9398;
 position:relative;overflow:hidden;box-sizing:border-box;background:#fff;
 width:794px;height:1123px;padding:11px 16px 18px;
 font:400 var(--a4-fs)/var(--a4-lh) 'Microsoft YaHei','PingFang SC',var(--sans);
 color:#1d232a;-webkit-font-smoothing:antialiased;
}
.a4 *{box-sizing:border-box}
.a4 h1,.a4 h2,.a4 h3,.a4 p{margin:0}
.a4 ul{margin:0;padding:0;list-style:none}
.a4 b{font-weight:700}
.a4 a{color:inherit;text-decoration:none}

/* 顶部灰字「个人简历」+ 蓝金双色横线（蓝 68% / 金 32%，3px） */
/* 选择器带 .a4 前缀：上面的 .a4 p{margin:0} 特异性更高，否则 margin 不生效。标题盒 11→45.5px，线 45.5→48.5，标签 52.5 */
.a4 .a4-doc-title{font-size:30px;line-height:1.15;font-weight:400;letter-spacing:.04em;color:var(--a4-gray);position:relative;margin:0 0 13px} /* 标题到「基本信息」标签也是一个分节间距（PDF 里同样的空段） */
.a4-doc-title::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:3px;background:linear-gradient(90deg,var(--a4-blue) 0 68%,var(--a4-gold) 68% 100%)}

/* 分节标签：钢蓝色块、右端斜切、旁边一道细斜纹；各分节标签底边还有一条细线通到右页边，
   「基本信息」没有这条线（预览图如此）。线画在 h2 自己的背景里、与色块同底，不用 border，免得色块和线之间出现台阶 */
/* 形状逐行量自预览图（换算到 794 宽、相对标签左上角）：
   色块 0–96 宽、22.5 高的矩形，右上角多出一块楔形：上边到 x=100，右边缘往右下斜到 (116,18.3)，然后在 y=18.3 收回到 x=96；
   色块右侧 1px 白缝外一道 1px 斜纹，与斜边平行，从 (103,0) 到 (120,18.3)；
   色块正下方（不重叠）一条 1.7px 细线通到右页边——「基本信息」没有这条线。 */
.a4-sec-t,.a4-head-tag{
 position:relative;isolation:isolate;display:block;height:22.5px;padding-left:7px;margin-bottom:4px;
 font-size:13.3px;line-height:22.5px;font-weight:400;letter-spacing:.02em;color:#fff;
}
.a4-sec-t{height:24.2px;background:linear-gradient(var(--a4-blue),var(--a4-blue)) left bottom/100% 1.7px no-repeat}
.a4-sec-t::before,.a4-head-tag::before{
 content:'';position:absolute;left:0;top:0;height:22.5px;width:116px;z-index:-1;background:var(--a4-blue);
 clip-path:polygon(0 0,100px 0,116px 18.3px,96px 18.3px,96px 100%,0 100%);
}
.a4-sec-t::after,.a4-head-tag::after{
 content:'';position:absolute;left:103.3px;top:0;height:18.3px;width:1.2px;background:var(--a4-blue);
 transform:skewX(42.4deg);transform-origin:0 0;
}

/* 页眉：标签、姓名、求职意向、联系方式、到岗信息。高度固定成 119px，让「教育背景」标签永远落在页顶 178px（预览图位置），
   不随字体度量漂移。证件照：117×144（3:4 原图上下各裁一点），上缘在页顶 56px、下缘正好齐「教育背景」标签底线，
   距右页边 96px；相对整张纸定位（.a4-head 不做定位上下文）。 */
/* 2026-09-22 去掉「求职意向」一行：页眉总高不变（分节与照片位置都不动），空出来的高度用字号和间距补回来——
   姓名 23→24px、联系方式 13.3→14.5px 粗体、到岗说明 12.5→13px，行距/间距按新 PDF 预览量出的字形位置定
   （姓名字形 80.8–102.5、联系方式 119–133、到岗说明 146.6–158.3，均为纸面 px）。 */
/* 页眉高度不再写死：内容到哪算到哪，下面「教育背景」靠 .a4-sec 的 --a4-gap 隔开，和其它分节间距一致；
   照片上缘距标题横线、下缘距「教育背景」标签底边各留 6px 等宽白边（标签顶 169、底 191.5） */
.a4-head{position:static;height:auto;padding:0 220px 0 0}
/* 选择器带 .a4 前缀：上面的 .a4 h1/.a4 p{margin:0} 特异性更高，否则 margin 不生效 */
/* 页眉三行之间不再额外留空，行距与正文相近，读起来是一个整块（按 PDF 预览字形位置：姓名 86.6–108.3、联系方式 116.6–130.8、到岗说明 139–150.8） */
.a4 .a4-name{margin:0;font-size:24px;line-height:32px;font-weight:700;letter-spacing:.02em;color:#1d232a}
.a4 .a4-contact{margin:0;font-size:14.5px;line-height:20px;font-weight:700}
.a4 .a4-avail{margin:2px 0 0;font-size:13px;line-height:19px;font-weight:700} /* 基本信息三行统一粗体 */
.a4-photo{
 position:absolute;right:96px;top:55px;width:99.7px;height:125px;z-index:1; /* 上下留白各 6.5：上缘 55 = 标题横线底 48.5 + 6.5，下缘 180 = 「教育背景」标签底 186.5 − 6.5；宽高比同原图 3:4 裁切 */
 object-fit:cover;object-position:50% 20%;background:#f6f7f8; /* 量自预览图：头顶距框上缘 13px */
}

/* 手机版两页摊开：两张 794×680 的页并排（2026-09-22 正文行距放大后 640 装不下右页），中间 24px 缝露出桌面色；右页第一节紧贴页顶（没有标题行） */
.a4-spread{position:relative;display:flex;gap:24px;width:1612px;height:680px;background:#e9e2d4;overflow:hidden}
.a4-spread .a4{height:680px;flex:none;padding-bottom:26px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.a4-spread .a4-page-r>.a4-sec:first-child{margin-top:0}
.a4-spread .a4-page-l{box-shadow:inset -10px 0 14px -12px rgba(0,0,0,.18)}
.a4-spread .a4-page-r{box-shadow:inset 10px 0 14px -12px rgba(0,0,0,.18)}
.a4-page-no{position:absolute;right:16px;bottom:8px;font-size:10.5px;color:var(--a4-gray);letter-spacing:.06em}

/* 分节 */
.a4-sec{margin-top:var(--a4-gap)}
.a4-sec-body{padding-top:0}

/* 条目：标题深蓝加粗 10.5pt，日期靠右同色 */
.a4-entry{padding:2px 0 0}
.a4-entry-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.a4-entry-t{font-size:14px;line-height:var(--a4-lh);font-weight:700;color:var(--a4-blue-ink);letter-spacing:0}
.a4-date{flex:none;font-size:12px;line-height:var(--a4-lh);color:var(--a4-blue-ink);font-variant-numeric:tabular-nums}
.a4-note{margin-top:0}
.a4-compact{margin-top:0}
.a4-compact .a4-entry-t{font-size:14px;line-height:inherit}
.a4-group{margin-top:2px;font-size:14px;line-height:var(--a4-lh);font-weight:700;color:var(--a4-blue-ink)}
.a4-para{margin-top:1px}

/* 要点：与纸质稿一致，不带圆点，行首直接是加粗小标题 */
.a4-bullets{margin-top:0}
.a4-bullets li{position:relative;padding-left:0}

/* ---------- 交互：默认就是印在纸上的文字，悬停才显形 ---------- */

.a4-hot{position:relative;cursor:pointer;border-radius:4px}
.a4-hot::after{
 content:attr(data-hint);
 position:absolute;right:-4px;bottom:calc(100% + 7px);
 padding:1px 9px;border-radius:999px;white-space:nowrap;
 font:400 13px/1.5 var(--hand);color:var(--green-deep);
 background:rgba(255,255,255,.94);box-shadow:0 0 0 1px rgba(var(--a4-hot),.3);
 opacity:0;pointer-events:none;transition:opacity .15s ease;
}
/* 贴着页眉或右边距的块把标签挂到左上角，标签不会越出纸面 */
.a4-hot[data-side=left]::after{right:auto;left:-4px}
.a4-hot.is-flash{
 background:rgba(var(--a4-hot),.06);
 outline:1.5px solid rgba(var(--a4-hot),.55);outline-offset:4px;
 box-shadow:0 0 0 4px rgba(var(--a4-hot),.06);
}
.a4-hot.is-flash::after{opacity:1}
/* 悬停态只给真有鼠标的设备：iOS/iPadOS 上第一下点击先当 hover 处理，会把点击吞掉，变成要点两次 */
@media (hover:hover){
 .a4-hot:hover{
  background:rgba(var(--a4-hot),.06);
  outline:1.5px solid rgba(var(--a4-hot),.55);outline-offset:4px;
  box-shadow:0 0 0 4px rgba(var(--a4-hot),.06);
 }
 .a4-hot:hover::after{opacity:1}
}
/* 主程序在 HR 悬停旁边的提示卡时加 .is-flash：同样的小框，脉冲两次 */
.a4-hot.is-flash{animation:a4-flash 1.3s ease-in-out}
@keyframes a4-flash{
 0%{outline-color:rgba(var(--a4-hot),0)}
 25%{outline-color:rgba(var(--a4-hot),1)}
 50%{outline-color:rgba(var(--a4-hot),.4)}
 75%{outline-color:rgba(var(--a4-hot),1)}
 100%{outline-color:rgba(var(--a4-hot),.55)}
}

@media (prefers-reduced-motion:reduce){
 .a4-hot,.a4-hot::after{transition:none;animation:none}
}