/* ===== Do Re Mi ice 屋 — 童趣風格 ===== */
:root{
  --pink:#ff9fb8;
  --pink-soft:#ffd7e2;
  --pink-bg:#fff2f6;
  --blue:#8fd3ff;
  --blue-soft:#d3f0ff;
  --yellow:#ffe28a;
  --mint:#bdeecb;
  --brown:#7a5c4f;
  --ink:#5a4138;
  --radius:26px;
  --shadow:0 10px 26px rgba(255,140,170,.22);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Baloo 2","Noto Sans TC",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 8%, #fff7fb 0, transparent 40%),
    radial-gradient(circle at 88% 12%, #eef9ff 0, transparent 42%),
    linear-gradient(180deg,#fff6f9 0%,#fdf2f7 60%,#f3faff 100%);
  background-attachment:fixed;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

/* ===== 導覽 ===== */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:10px 22px;
  background:rgba(255,255,255,.78);backdrop-filter:blur(10px);
  border-bottom:3px dashed var(--pink-soft);
}
.nav-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;color:var(--brown)}
.nav-logo img{border-radius:50%;border:2px solid var(--pink-soft)}
.nav-links{display:flex;gap:6px;flex-wrap:wrap}
.nav-links a{
  padding:6px 14px;border-radius:999px;font-weight:700;font-size:.95rem;color:var(--brown);
  transition:.2s;
}
.nav-links a:hover{background:var(--pink-soft);color:#d65f80}

/* ===== Hero ===== */
.hero{
  position:relative;text-align:center;
  padding:54px 20px 64px;overflow:hidden;
}
.hero-clouds span{position:absolute;opacity:.7;animation:float 6s ease-in-out infinite}
.cloud{font-size:3rem;color:#fff}
.c1{top:30px;left:8%}
.c2{top:60px;right:10%;animation-delay:1.2s}
.heart{color:var(--pink);font-size:1.8rem}
.h1{top:120px;left:18%;animation-delay:.6s}
.h2{top:90px;right:20%;animation-delay:1.8s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.hero-logo{
  width:200px;height:200px;border-radius:50%;margin:0 auto 14px;
  border:6px solid #fff;box-shadow:var(--shadow);background:#fff;
  object-fit:cover;
}
.hero-title{
  font-size:clamp(2.4rem,7vw,4rem);font-weight:800;letter-spacing:1px;
  color:var(--brown);
}
.hero-title span{color:var(--pink)}
.hero-sub{font-size:1.2rem;font-weight:700;color:#e07f9b;margin-top:4px}
.hero-tag{color:#9a8278;margin:6px auto 26px;max-width:520px}
.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.btn{
  display:inline-block;padding:13px 28px;border-radius:999px;
  font-weight:800;font-size:1.05rem;box-shadow:var(--shadow);
  transition:transform .15s, box-shadow .15s;
}
.btn:hover{transform:translateY(-3px) scale(1.03)}
.btn-pink{background:var(--pink);color:#fff}
.btn-blue{background:var(--blue);color:#fff}

/* ===== 區塊共用 ===== */
section{max-width:1040px;margin:0 auto;padding:50px 20px}
.sec-title{
  text-align:center;font-size:clamp(1.7rem,5vw,2.4rem);font-weight:800;
  color:var(--brown);margin-bottom:8px;
}
.sec-title .dot{color:var(--pink)}
.sec-sub{text-align:center;color:#a08a80;margin-bottom:28px;font-size:.95rem}

/* ===== 關於 ===== */
.about-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:center}
.about-text p{margin-bottom:14px}
.about-text strong{color:#d65f80}
.about-heart{
  background:#fff;border:3px dashed var(--blue);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow);color:var(--ink);
}
.about-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feat{
  background:#fff;border-radius:var(--radius);padding:20px 10px;text-align:center;
  box-shadow:var(--shadow);border:2px solid var(--pink-soft);
}
.feat span{font-size:2.2rem;display:block}
.feat b{display:block;color:var(--brown);margin-top:6px}
.feat small{color:#a08a80}

/* ===== 菜單 ===== */
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px}
.m-card{
  position:relative;background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);border:2px solid var(--pink-soft);
  transition:transform .18s;
}
.m-card:hover{transform:translateY(-6px) rotate(-1deg)}
.m-card img{aspect-ratio:1/1;object-fit:cover;width:100%}
.m-info{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.m-info h3{font-size:1.05rem;color:var(--brown);font-weight:700}
.price{
  background:var(--yellow);color:#9a6b00;font-weight:800;
  padding:3px 12px;border-radius:999px;white-space:nowrap;
}
.m-note{padding:0 16px 14px;color:#d65f80;font-weight:700;font-size:.9rem}
.m-star{border-color:var(--pink);box-shadow:0 12px 30px rgba(255,120,150,.35)}
.badge{
  position:absolute;top:10px;left:10px;z-index:2;
  background:var(--pink);color:#fff;font-weight:800;font-size:.82rem;
  padding:4px 12px;border-radius:999px;box-shadow:var(--shadow);
}
.m-text{display:flex;flex-direction:column;justify-content:center;min-height:230px;background:var(--blue-soft)}
.m-emoji{font-size:4rem;text-align:center}

/* ===== 相片 ===== */
.g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.g-grid img{
  aspect-ratio:1/1;object-fit:cover;width:100%;border-radius:var(--radius);
  box-shadow:var(--shadow);border:3px solid #fff;transition:transform .2s;
}
.g-grid img:hover{transform:scale(1.04) rotate(1deg)}

/* ===== 店家資訊 ===== */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.info-card{
  background:#fff;border-radius:var(--radius);padding:26px;
  box-shadow:var(--shadow);border:2px solid var(--pink-soft);
}
.info-list{list-style:none}
.info-list li{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-bottom:2px dashed var(--pink-bg)}
.info-list li:last-child{border:none}
.info-list b{color:#d65f80}
.info-list a{color:#2f9fd6;font-weight:700}
.info-list em{color:#a08a80;font-style:normal;font-size:.86rem}
.socials{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.s-btn{padding:9px 18px;border-radius:999px;color:#fff;font-weight:800;font-size:.92rem;transition:transform .15s}
.s-btn:hover{transform:translateY(-2px)}
.s-btn.ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.s-btn.fb{background:#1877f2}
.s-btn.th{background:#111}
.info-map iframe{width:100%;height:100%;min-height:340px;border:0;border-radius:var(--radius);box-shadow:var(--shadow)}

/* ===== Footer ===== */
.footer{text-align:center;padding:40px 20px;color:#9a8278}
.footer img{margin:0 auto 10px;border-radius:50%;border:3px solid var(--pink-soft)}
.footer p{font-weight:700;color:var(--brown)}
.footer .copy{font-weight:400;font-size:.85rem;color:#b3a097;margin-top:4px}

/* ===== RWD ===== */
@media(max-width:760px){
  .about-grid,.info-grid{grid-template-columns:1fr}
  .nav-links{gap:2px}
  .nav-links a{padding:5px 9px;font-size:.85rem}
  .nav-logo span{display:none}
}