/* CDJ_ABOUT_PAGE_V2_20260706 */
:root{
  --about-bg:#fffaf2;
  --about-paper:#fffefb;
  --about-ink:#2b2118;
  --about-muted:#756756;
  --about-line:#eadac7;
  --about-brand:#d8893a;
  --about-brand-dark:#8a4c14;
  --about-soft:#fff1dc;
  --about-green:#edf7ef;
  --about-blue:#edf7fb;
  --about-shadow:0 18px 45px rgba(99,62,24,.12);
  --about-radius:28px;
}
.about-v2{background:linear-gradient(180deg,#fff7ea 0%,#fffdf8 48%,#fffaf2 100%);color:var(--about-ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;line-height:1.72;overflow:hidden}
.about-v2 *{box-sizing:border-box}
.about-v2 a{text-decoration:none;color:inherit}
.about-wrap{width:min(1120px,calc(100% - 44px));margin:auto}
.about-hero{padding:46px 0 30px;display:grid;grid-template-columns:1.08fr .92fr;gap:28px;align-items:stretch}
.about-panel{background:rgba(255,254,251,.94);border:1px solid var(--about-line);border-radius:34px;padding:44px;box-shadow:var(--about-shadow);position:relative;overflow:hidden}
.about-panel:before{content:"";position:absolute;right:-90px;top:-90px;width:230px;height:230px;background:radial-gradient(circle,#ffe1af 0%,rgba(255,225,175,0) 70%);pointer-events:none}
.about-kicker{display:inline-flex;gap:8px;align-items:center;padding:7px 13px;border-radius:999px;background:#fff0d8;color:#9b5e19;font-weight:900;font-size:14px;margin-bottom:18px;position:relative;z-index:1}
.about-hero h1{font-size:clamp(38px,5.2vw,58px);line-height:1.12;margin:0 0 18px;letter-spacing:.02em;position:relative;z-index:1}
.about-lead{font-size:18px;color:#5e4f42;margin:0 0 26px;max-width:720px;position:relative;z-index:1}
.about-actions{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:1}
.about-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;font-weight:900;border:1px solid var(--about-line);background:#fff;box-shadow:0 8px 22px rgba(99,62,24,.06)}
.about-btn.primary{background:linear-gradient(135deg,#d8872f,#f0b260);color:white;border:0;box-shadow:0 12px 24px rgba(207,126,40,.24)}
.about-visual{background:linear-gradient(160deg,#fff4e5,#fffefd 52%,#eef7f0);border:1px solid var(--about-line);border-radius:34px;padding:28px;box-shadow:var(--about-shadow);position:relative;overflow:hidden}
.about-visual-title{font-weight:950;font-size:22px;margin-bottom:16px}
.about-family-map{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.about-person{background:rgba(255,255,255,.78);border:1px solid rgba(234,218,199,.8);border-radius:22px;padding:16px;min-height:118px;position:relative}
.about-person strong{display:block;font-size:18px;margin-bottom:4px}
.about-person span{font-size:13px;color:var(--about-muted)}
.about-person.main{grid-column:1/3;background:linear-gradient(135deg,#fff,#fff1d9)}
.about-doodle{position:absolute;right:18px;bottom:13px;font-size:28px;opacity:.74}
.about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 auto 26px}
.about-stat{background:#fff;border:1px solid var(--about-line);border-radius:22px;padding:18px 20px;box-shadow:0 10px 30px rgba(99,62,24,.07)}
.about-stat b{display:block;font-size:28px;color:#b96f24;line-height:1.1}
.about-stat span{font-size:13px;color:var(--about-muted)}
.about-section{padding:28px 0}
.about-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:10px 0 20px}
.about-section-head h2{font-size:30px;margin:0;line-height:1.25}
.about-section-head p{margin:0;color:var(--about-muted);max-width:560px}
.about-definition{display:grid;grid-template-columns:.85fr 1.15fr;gap:18px}
.about-card{background:var(--about-paper);border:1px solid var(--about-line);border-radius:26px;padding:26px;box-shadow:0 12px 32px rgba(99,62,24,.08)}
.about-card h3{margin:0 0 10px;font-size:21px}
.about-card p{margin:0;color:var(--about-muted)}
.about-quote{font-size:23px;font-weight:950;line-height:1.45;color:#704115}
.about-grid-4{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.about-story-card{background:var(--about-paper);border:1px solid var(--about-line);border-radius:26px;padding:24px;box-shadow:0 12px 32px rgba(99,62,24,.08);min-height:238px;display:flex;flex-direction:column}
.about-story-card .tag{align-self:flex-start;font-size:12px;font-weight:950;color:#8b561a;background:#fff0d8;border-radius:999px;padding:5px 10px;margin-bottom:14px}
.about-story-card h3{margin:0 0 10px;font-size:21px}
.about-story-card p{color:var(--about-muted);font-size:14px;margin:0}
.about-story-card .mini{margin-top:auto;padding-top:16px;font-size:13px;color:#a06a2b;font-weight:800}
.about-people-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.about-avatar-card{background:#fff;border:1px solid var(--about-line);border-radius:26px;padding:20px;box-shadow:0 12px 30px rgba(99,62,24,.07);min-height:250px}
.about-avatar{width:64px;height:64px;border-radius:22px;display:grid;place-items:center;font-size:34px;background:#fff1dc;margin-bottom:14px}
.about-avatar-card h3{margin:0 0 8px;font-size:20px}
.about-avatar-card p{font-size:14px;color:var(--about-muted);margin:0}
.about-routes{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.about-route{background:linear-gradient(180deg,#fff,#fff9f0);border:1px solid var(--about-line);border-radius:26px;padding:24px;box-shadow:0 12px 32px rgba(99,62,24,.08)}
.about-route b{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:16px;background:#fff0d8;color:#a85f1a;margin-bottom:12px;font-size:20px}
.about-route h3{margin:0 0 8px;font-size:20px}
.about-route p{margin:0;color:var(--about-muted);font-size:14px}
.about-final{padding:28px 0 54px}
.about-final-card{background:linear-gradient(135deg,#8b5e34,#d88a3b);color:white;border-radius:34px;padding:38px;box-shadow:var(--about-shadow);display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.about-final-card h2{margin:0 0 8px;font-size:30px}.about-final-card p{margin:0;opacity:.92}.about-final-card .about-btn{color:#73400d;background:white;border:0}
@media(max-width:960px){.about-hero,.about-definition{grid-template-columns:1fr}.about-stats,.about-grid-4,.about-routes{grid-template-columns:repeat(2,1fr)}.about-people-grid{grid-template-columns:repeat(2,1fr)}.about-final-card{grid-template-columns:1fr}}
@media(max-width:600px){.about-wrap{width:min(100% - 28px,1120px)}.about-stats,.about-grid-4,.about-routes,.about-people-grid{grid-template-columns:1fr}.about-panel{padding:30px 24px}.about-hero h1{font-size:34px}.about-section-head{display:block}.about-visual{padding:22px}}
