/* 特色款・九宮格：IG 個人頁的排法。圓形頭像（有漸層外圈）、數字列、正方形三欄照片牆，點了全螢幕放大。 */
.s-grid9 { --bg: #fff; --bg2: #fafafa; --fg: #111; --muted: #6f6f6f; --line: #e8e8e8; --accent: #e1306c; --on-accent: #fff; --card: #fff;
  --radius: 12px; --radius-btn: 10px; --h1: clamp(1.5rem, 4vw, 2.2rem); --wrap: 940px; }
.s-grid9 .top { background: rgba(255, 255, 255, .95); }
.g9-profile { display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 5vw, 64px); align-items: center; padding-block: clamp(28px, 5vw, 56px) clamp(20px, 3vw, 32px); border-bottom: 1px solid var(--line); }
.g9-avatar { width: clamp(96px, 22vw, 168px); aspect-ratio: 1; border-radius: 50%; padding: 4px;
  background: conic-gradient(from 200deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.g9-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 4px solid #fff; }
.s-grid9 .g9-info h1 { font-size: var(--h1); font-weight: 700; letter-spacing: .02em; }
.s-grid9 .hero-en { margin: 4px 0 0; letter-spacing: .15em; }
.g9-stats { list-style: none; display: flex; gap: clamp(16px, 4vw, 36px); padding: 0; margin: 14px 0 0; font-size: .95rem; color: var(--muted); }
.g9-stats b { color: var(--fg); margin-right: 4px; font-size: 1.05rem; }
.s-grid9 .hero-lede { margin-top: 12px; font-size: .98rem; color: #333; }
.s-grid9 .hero-act { margin-top: 16px; gap: 8px; }
.s-grid9 .btn { padding: 8px 18px; font-size: .92rem; border-radius: var(--radius-btn); background: #0095f6; border-color: #0095f6; }
.s-grid9 .btn-2 { background: #efefef; color: #111; border-color: #efefef; }
@media (max-width: 560px) { .g9-profile { grid-template-columns: 1fr; text-align: left; } .g9-avatar { width: 92px; } }
.sec-g9 { padding-top: 4px; }
.g9-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(3px, .6vw, 6px); }
.g9-tile { position: relative; aspect-ratio: 1; overflow: hidden; display: block; }
.g9-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.g9-tile span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; background: rgba(0, 0, 0, .35); opacity: 0; transition: opacity .3s; text-align: center; padding: 8px; }
.g9-tile:hover span, .g9-tile:focus span { opacity: 1; }
/* 放大看（跟作品牆同一套） */
.s-grid9 .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .92); display: none; place-items: center; padding: 56px 16px; }
.s-grid9 .lightbox:target { display: grid; }
.s-grid9 .lightbox figure { margin: 0; max-width: min(900px, 100%); display: grid; gap: 12px; justify-items: center; }
.s-grid9 .lightbox img { max-height: calc(100vh - 160px); width: auto; object-fit: contain; }
.s-grid9 .lightbox figcaption { color: #ddd; text-align: center; }
.s-grid9 .lb-close { position: absolute; inset: 0; }
.s-grid9 .lb-close::after { content: "×"; position: absolute; top: 12px; right: 20px; color: #fff; font-size: 2.4rem; }
.s-grid9 .lb-prev, .s-grid9 .lb-next { position: absolute; top: 50%; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; background: rgba(255, 255, 255, .85); z-index: 2; }
.s-grid9 .lb-prev { left: 14px; } .s-grid9 .lb-next { right: 14px; }
.s-grid9 .lb-prev::after, .s-grid9 .lb-next::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border: solid #111; border-width: 0 0 2px 2px; }
.s-grid9 .lb-prev::after { transform: translate(-30%, -50%) rotate(45deg); } .s-grid9 .lb-next::after { transform: translate(-70%, -50%) rotate(-135deg); }
.s-grid9 .sec { border-top: 1px solid var(--line); }
.s-grid9 .sec-h { font-size: 1.2rem; text-align: center; letter-spacing: .2em; }
.s-grid9 .card { border: 1px solid var(--line); box-shadow: none; }
.s-grid9 .card .price { color: #111; }
.s-grid9 .day i { border-radius: 999px; background: #efefef; border: 0; }
.s-grid9 .foot { background: #fff; }
