/* ===============================
   Yan の小宇宙 — 完整可愛風樣式 (全站最終整合版)
   適用：index.html / notes.html / gallery.html / contact.html
   =============================== */

/* === 色板與共用變數 === */
:root{
  --bg:#fff7fb;--bg-2:#fff1e6;--card:#ffffffee;--text:#2b2b34;--muted:#5e5e6b;
  --brand:#ff8ec7;--brand-2:#bde0fe;--mint:#cdeac0;--yolk:#ffe599;
  --shadow:0 10px 24px rgba(255,142,199,.22);
  --shadow-2:0 2px 8px rgba(0,0,0,.08);
  --radius:20px;--radius-lg:28px;--glass:blur(10px) saturate(120%);
  --focus:0 0 0 3px rgba(255,142,199,.5);
  /* 按鈕安全色（避免白底白字） */
  --btn-bg:#2b2b34;--btn-fg:#ffffff;--btn-bg-hover:#1f1f27;
}
:root.dark{
  --bg:#12121a;--bg-2:#181822;--card:#242433f2;--text:#f6f6fb;--muted:#c9c9d6;
  --brand:#ff8ec7;--brand-2:#8ecbff;--mint:#9be6b5;--yolk:#ffdd7a;
  --shadow:0 10px 24px rgba(0,0,0,.35);--shadow-2:0 2px 8px rgba(0,0,0,.25);
  --glass:blur(10px) saturate(130%);--focus:0 0 0 3px rgba(142,197,255,.5);
  --btn-bg:#3a3a47;--btn-fg:#ffffff;--btn-bg-hover:#2e2e3a;
}

/* === 基礎排版 === */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.75 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,'Noto Sans TC',PingFang TC,Helvetica,Arial;
  background:
    radial-gradient(1200px 600px at 10% -10%,var(--bg-2),transparent 65%),
    radial-gradient(900px 520px at 110% 10%,var(--brand-2),transparent 45%),
    linear-gradient(var(--bg),var(--bg));
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  scroll-behavior:smooth;
}
@media (max-width:980px){:root{font-size:15.5px}}
@media (max-width:640px){:root{font-size:15px}}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}

/* === 版寬與格線 === */
.container{width:min(1100px,92vw);margin:auto}
.row{display:grid;gap:18px}
.grid-2{grid-template-columns:1.1fr .9fr}
@media (max-width:980px){.grid-2{grid-template-columns:1fr}}

/* === Header / Drawer / Overlay === */
.header-wrap{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,0));backdrop-filter:blur(10px)}
:root.dark .header-wrap{background:linear-gradient(180deg,rgba(24,24,32,.62),rgba(24,24,32,0))}
header.header{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(from 200deg,var(--brand),var(--mint),var(--brand-2),var(--brand));box-shadow:var(--shadow-2)}
.brand-logo::after{content:"🧠";font-size:20px}
.brand-name{font-weight:800;letter-spacing:.3px}
.nav a{display:inline-block;padding:8px 12px;border-radius:12px}
.nav a:hover{background:rgba(0,0,0,.05)}
:root.dark .nav a:hover{background:rgba(255,255,255,.08)}
.actions{display:flex;align-items:center;gap:8px}

/* === Icon Buttons（置中＋明暗層次） === */
.iconbtn{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;
  background:linear-gradient(180deg,color-mix(in oklab,var(--card) 88%,white 12%),color-mix(in oklab,var(--card) 70%,black 30%));
  border:1px solid rgba(0,0,0,.1);
  box-shadow:0 2px 6px rgba(0,0,0,.12),var(--shadow-2);
  transition:transform .15s ease,box-shadow .15s ease;
}
:root.dark .iconbtn{
  background:linear-gradient(180deg,color-mix(in oklab,#ffffff 25%,var(--card) 75%),color-mix(in oklab,#000000 10%,var(--card) 90%));
  border-color:rgba(255,255,255,.2);
}
.iconbtn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.15),var(--shadow)}
.iconbtn:active{transform:translateY(0)}
.iconbtn:focus-visible{outline:none;box-shadow:var(--focus),0 2px 8px rgba(0,0,0,.25)}

/* === 按鈕 / 膠囊 === */
.btn,button{
  border:0;border-radius:999px;padding:12px 18px;
  background:var(--btn-bg);color:var(--btn-fg);
  box-shadow:var(--shadow-2);cursor:pointer;
  transition:transform .12s ease,background-color .15s ease
}
.btn:hover{transform:translateY(-1px);background:var(--btn-bg-hover)}
.btn.secondary{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff}
.chip{
  border:1px solid rgba(0,0,0,.08);border-radius:999px;padding:10px 14px;
  background:var(--card);color:var(--text);box-shadow:var(--shadow-2);
  display:inline-flex;align-items:center;gap:6px
}
:root.dark .chip{border-color:rgba(255,255,255,.16)}

/* === Drawer === */
.drawer{position:fixed;inset:0 0 0 auto;width:min(320px,85vw);translate:100% 0;background:var(--bg-2);box-shadow:-12px 0 30px rgba(0,0,0,.15);transition:translate .3s ease;z-index:60;padding:18px}
.drawer.open{translate:0 0}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.18);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .28s ease;z-index:55}
.overlay.show{opacity:1;pointer-events:auto}

/* === Hero === */
.hero{padding:28px 0 18px 0}
.badges{display:flex;gap:10px;flex-wrap:wrap}
.badges .chip{background:linear-gradient(90deg,var(--yolk),var(--brand-2));color:#222;border-color:rgba(0,0,0,.12)}
.hero-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center}
@media (max-width:980px){.hero-wrap{grid-template-columns:1fr}}
.h1{font-size:clamp(28px,4vw,42px);font-weight:900;margin:6px 0 8px 0}
.h1 i{font-style:normal;transform:rotate(-3deg);background:linear-gradient(90deg,var(--brand),var(--yolk));-webkit-background-clip:text;color:transparent}
.subtitle{color:color-mix(in oklab,var(--muted) 86%,var(--text) 14%)}
.hero-card{background:var(--card);backdrop-filter:var(--glass);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.06)}
/* Hero 內三顆主題膠囊（span） */
.hero-card .kv span{
  display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;
  background:linear-gradient(90deg,var(--mint),var(--brand-2));color:#1d2a2a;
  border:1px solid rgba(0,0,0,.12);box-shadow:var(--shadow-2);font-weight:600
}
:root.dark .hero-card .kv span{border-color:rgba(255,255,255,.18)}
.hero-illus{aspect-ratio:4/3;border-radius:22px;background:repeating-conic-gradient(from 0deg,rgba(255,142,199,.22) 0 15deg,rgba(189,224,254,.22) 15deg 30deg,rgba(205,234,192,.22) 30deg 45deg);position:relative;overflow:hidden}
.sticker{position:absolute;filter:drop-shadow(0 8px 16px rgba(0,0,0,.15))}
.sticker.s1{top:10%;left:8%;font-size:42px;rotate:-12deg}
.sticker.s2{bottom:6%;right:10%;font-size:44px;rotate:8deg}
.sticker.s3{top:12%;right:36%;font-size:36px;rotate:5deg}

/* === 區塊 / 卡片 === */
.section{padding:24px 0}
.card{background:var(--card);backdrop-filter:var(--glass);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-2);border:1px solid rgba(0,0,0,.08)}
.kv{display:flex;gap:10px;flex-wrap:wrap}
.kv .chip{background:linear-gradient(90deg,var(--mint),var(--brand-2));color:#1d2a2a;border-color:rgba(0,0,0,.12)}
:root.dark .kv .chip{border-color:rgba(255,255,255,.18)}
.note{border-radius:16px;border:2px dashed rgba(0,0,0,.12);padding:12px;background:linear-gradient(180deg,#ffffff,#fff9);color:var(--text)}
:root.dark .note{background:linear-gradient(180deg,#2b2b38,#2b2b38ea);color:#eef0f6}

/* === 瀑布流（notes / gallery） === */
.masonry{columns:3;column-gap:14px}
@media (max-width:980px){.masonry{columns:2}}
@media (max-width:640px){.masonry{columns:1}}
.pin{break-inside:avoid;padding:12px;margin:0 0 14px 0;border-radius:18px;background:var(--card);backdrop-filter:var(--glass);box-shadow:var(--shadow-2);border:1px solid rgba(0,0,0,.08);transition:transform .15s ease,box-shadow .15s ease}
.pin:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.pin h4{margin:0 0 6px 0}
.pin img{border-radius:12px}
.tag{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.08);color:#1f1f1f;font-size:12px;margin-left:6px}
:root.dark .tag{background:rgba(255,255,255,.12);color:#f2f2f2}
.caption{display:flex;align-items:center;justify-content:space-between;margin-top:6px;color:color-mix(in oklab,var(--text) 88%,black 12%);opacity:1;font-size:14px}

/* === Gallery 篩選 + Lightbox === */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 6px 0}
.filters .chip{background:linear-gradient(90deg,var(--mint),var(--brand-2));color:#243;border-color:rgba(0,0,0,.12)}
.filters .chip.is-active{outline:2px solid rgba(0,0,0,.16)}
:root.dark .filters .chip.is-active{outline-color:rgba(255,255,255,.22)}
dialog#lightbox{border:0;padding:0;background:transparent}
dialog#lightbox::backdrop{background:rgba(0,0,0,.45);backdrop-filter:blur(2px)}
#lightbox{width:100vw;height:100vh;display:grid;place-items:center}
.lightbox-close{position:fixed;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:0;background:var(--card);box-shadow:var(--shadow-2);cursor:pointer}
.lightbox-close:focus-visible{outline:none;box-shadow:var(--focus)}
#lightbox-img{max-width:min(92vw,1100px);max-height:84vh;border-radius:16px;box-shadow:var(--shadow);background:#000}
.lightbox-cap{margin-top:10px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);text-align:center}

/* === 表單（通用） === */
.input{padding:12px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:var(--bg-2);color:var(--text)}
.input:focus-visible{outline:none;box-shadow:var(--focus)}
.toast{display:none;padding:10px;border-radius:10px;background:linear-gradient(90deg,var(--mint),var(--brand-2));color:#143}

/* === Footer === */
footer{padding:28px 0 40px 0;color:var(--muted);text-align:center}

/* === 動畫與可及性 === */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.show{opacity:1;transform:none}
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:8px;top:8px;width:auto;height:auto;padding:8px 10px;background:#000;color:#fff;border-radius:8px;z-index:100}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* =========================================================
   ⬇ Contact 專屬美化（含 placeholder 行為修正）
   ========================================================= */

/* 開場卡片（玻璃擬態） */
.form-hero{
  border-radius:var(--radius-lg);
  padding:18px;
  background:
    radial-gradient(600px 200px at 0% -10%, var(--brand-2), transparent 60%),
    radial-gradient(400px 160px at 110% 0%, var(--yolk), transparent 55%),
    var(--card);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:var(--shadow);
}
.form-hero h2{margin:0 0 6px 0;font-size:clamp(22px,3.2vw,28px);font-weight:900;letter-spacing:.4px}
.form-hero .desc{color:color-mix(in oklab, var(--muted) 80%, var(--text) 20%)}

/* 兩欄表單 */
.form-grid{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:820px){.form-grid{grid-template-columns:1fr}}

/* 欄位外框 */
.field{position:relative;display:block}
.flabel{position:relative;display:block}
.flabel input,.flabel textarea,.flabel select{
  width:100%;padding:14px 14px 14px 44px;
  border-radius:14px;border:1px solid rgba(0,0,0,.12);
  background:var(--bg-2);color:var(--text);
  font-size:15px;transition:border .2s,background .2s
}
.flabel input:focus,.flabel textarea:focus,.flabel select:focus{
  border-color:color-mix(in oklab, var(--brand) 40%, transparent);
  background:color-mix(in oklab, var(--bg-2) 88%, var(--brand-2) 12%);
  outline:none
}
.flabel textarea{resize:vertical;min-height:110px}

/* Label 小字（固定上方） */
.flabel label{
  position:absolute;left:44px;top:8px;
  font-size:13px;color:color-mix(in oklab, var(--muted) 70%, var(--text) 30%);
  pointer-events:none
}

/* Placeholder 可見；聚焦會淡出 */
.flabel input::placeholder,.flabel textarea::placeholder{
  color:color-mix(in oklab, var(--muted) 65%, var(--text) 35%);
  opacity:.75;transition:opacity .25s
}
.flabel input:focus::placeholder,.flabel textarea:focus::placeholder{opacity:0}

/* 左側 emoji prefix */
.field .prefix{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;display:grid;place-items:center;
  font-size:17px;border-radius:50%;
  background:linear-gradient(180deg,#ffffff55,#00000010);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08);
  color:color-mix(in oklab, var(--text) 90%, var(--muted) 10%);
}

/* Select 下拉箭頭（SVG） */
.flabel select{
  appearance:none;padding-right:42px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23aaaaaa'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px
}

/* Radio 膠囊選項 */
.options{display:flex;flex-wrap:wrap;gap:10px}
.option{position:relative}
.option input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.option .chip{user-select:none}
.option input:checked+.chip{outline:2px solid rgba(0,0,0,.18);background:color-mix(in oklab, var(--brand-2) 25%, var(--bg-2) 75%)}
:root.dark .option input:checked+.chip{outline-color:rgba(255,255,255,.22)}

/* 提示與按鈕列 */
.hint{font-size:12.5px;color:color-mix(in oklab, var(--muted) 75%, var(--text) 25%)}
.actions-bar{display:flex;gap:10px;align-items:center;justify-content:flex-start}

/* 右欄資訊 */
.info-list{display:grid;gap:10px}
.info-row{display:flex;gap:10px;align-items:center}
.info-icon{
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;font-size:18px;
  background:var(--card);border:1px solid rgba(0,0,0,.08);
  box-shadow:var(--shadow-2)
}

/* Contact Toast */
.toast{display:none;margin-top:10px;padding:10px 14px;background:var(--brand-2);border-radius:10px;color:#fff;font-size:14px;text-align:center}
.toast.show{display:block;animation:fadein .4s ease}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* RWD 微調 */
@media (max-width:640px){
  .form-hero h2{text-align:center}
  .actions-bar{flex-direction:column;align-items:flex-start}
}

/* =============================== */
/* 🔹 浮動標籤效果（所有 input/textarea 適用） */
/* =============================== */
.flabel{position:relative;display:block}
.flabel input,.flabel textarea,.flabel select{
  width:100%;padding:14px 14px 14px 44px;
  border-radius:14px;border:1px solid rgba(255,255,255,.08);
  background:var(--bg-2);color:var(--text);
  font-size:15px;transition:all .25s ease}
.flabel input:focus,.flabel textarea:focus,.flabel select:focus{
  border:1px solid color-mix(in oklab,var(--brand-2) 40%,transparent);
  outline:none;box-shadow:0 0 6px rgba(255,255,255,.08)}
.flabel label{
  position:absolute;left:44px;top:14px;
  font-size:15px;color:color-mix(in oklab,var(--muted) 75%,var(--text) 25%);
  pointer-events:none;transition:all .25s ease}

/* 🪄 浮動條件：聚焦或有值時，label 縮小並上移 */
.flabel input:focus+label,
.flabel input:not(:placeholder-shown)+label,
.flabel textarea:focus+label,
.flabel textarea:not(:placeholder-shown)+label,
.flabel select:focus+label,
.flabel select:not([value=""])+label{
  top:-6px;left:38px;
  font-size:12px;padding:0 4px;
  background:var(--bg-2);
  color:var(--brand-2);
  border-radius:4px}

/* prefix emoji 調整置中 */
.prefix{position:absolute;left:12px;top:50%;
  transform:translateY(-50%);width:26px;height:26px;
  display:grid;place-items:center;font-size:17px;
  background:linear-gradient(180deg,#ffffff33,#00000022);
  border-radius:50%}