:root{
  --bg1:#eaf3fb; --bg2:#f7fbff; --card:#ffffff; --ink:#1f2d3d;
  --sub:#6b7c8f; --accent:#4a90d9; --warn:#e8833a; --rain:#3a8ec9;
  --line:#e3ecf4; --shadow:0 6px 20px rgba(40,80,130,.10);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:"Segoe UI","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  color:var(--ink);
  background:linear-gradient(165deg,var(--bg1),var(--bg2));
  min-height:100vh; line-height:1.5;
  padding:env(safe-area-inset-top) 12px 20px;
}
.wrap{max-width:560px;margin:0 auto;}
header{padding:10px 4px 4px;text-align:center;}
header h1{font-size:1.15rem;margin:0;letter-spacing:.02em;}
header .place{color:var(--sub);font-size:.85rem;margin-top:2px;min-height:1.1em;}

/* 体質トグル */
.body-toggle{display:flex;gap:6px;background:#dde9f4;border-radius:12px;padding:4px;margin:8px 0;}
.body-toggle button{
  flex:1;border:0;background:transparent;border-radius:9px;padding:7px 4px;
  font-size:.85rem;color:var(--sub);font-weight:600;cursor:pointer;transition:.2s;
}
.body-toggle button.on{background:var(--card);color:var(--accent);box-shadow:var(--shadow);}

/* 日カード */
.day{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:14px 14px;margin-bottom:12px;border:1px solid var(--line);}
.day-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:2px;}
.day-title{font-size:1.02rem;font-weight:700;}
.day-temp{font-size:.92rem;color:var(--sub);}
.day-temp b{color:var(--warn);}
.day-temp i{color:var(--accent);font-style:normal;}

.main-advice{display:flex;align-items:center;gap:12px;margin:6px 0 2px;}
.main-emoji{font-size:2.3rem;line-height:1;}
.main-text{font-size:1.1rem;font-weight:700;}
.main-text small{display:block;font-size:.8rem;font-weight:500;color:var(--sub);margin-top:1px;line-height:1.35;}

/* 時間帯 */
.slots{display:flex;gap:8px;margin:10px 0 4px;}
.slot{flex:1;background:#f4f8fc;border-radius:13px;padding:8px 6px;text-align:center;border:1px solid var(--line);}
.slot .label{font-size:.76rem;color:var(--sub);}
.slot .emoji{font-size:1.5rem;margin:1px 0;}
.slot .t{font-weight:700;font-size:.98rem;}
.slot .wear{font-size:.72rem;color:var(--sub);margin-top:1px;line-height:1.25;}

/* 時間別気温（横スクロール） */
.hourly-wrap{margin-top:10px;}
.hourly-label{font-size:.8rem;color:var(--sub);font-weight:600;margin-bottom:6px;}
.hourly{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;}
.hourly::-webkit-scrollbar{height:5px;}
.hourly::-webkit-scrollbar-thumb{background:#cdddec;border-radius:3px;}
.hr{flex:0 0 auto;min-width:46px;text-align:center;background:#f4f8fc;border:1px solid var(--line);
  border-radius:10px;padding:6px 4px;}
.hr .h{font-size:.72rem;color:var(--sub);}
.hr .e{font-size:1.05rem;margin:1px 0;}
.hr .tp{font-weight:700;font-size:.95rem;}
.hr .pp{font-size:.66rem;color:var(--rain);min-height:.9em;font-weight:600;}
.hr .pp.dry{color:#aab8c5;font-weight:500;}
.hr .mm{font-size:.62rem;color:#2b6fa0;min-height:.85em;font-weight:600;}
.hr.now{background:#e4f1fa;border-color:var(--accent);}

/* 注意タグ */
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:600;padding:6px 10px;border-radius:10px;}
.tag.rain{background:#e4f1fa;color:var(--rain);}
.tag.uv{background:#fdf0e3;color:var(--warn);}
.tag.gap{background:#eee6fb;color:#7d5bd0;}
.tag.dry{background:#eaf2ea;color:#5a9367;}

.btn{display:block;width:100%;border:0;border-radius:14px;padding:14px;font-size:1rem;font-weight:700;
  background:var(--accent);color:#fff;cursor:pointer;box-shadow:var(--shadow);}
.btn.ghost{background:var(--card);color:var(--accent);border:1px solid var(--accent);}
.search{display:none;gap:8px;margin:10px 0;}
.search input{flex:1;border:1px solid var(--line);border-radius:12px;padding:12px;font-size:1rem;}
.search button{border:0;background:var(--accent);color:#fff;border-radius:12px;padding:0 16px;font-weight:700;cursor:pointer;}
/* 都市検索の候補（複数ヒット時） */
.candidates{display:none;flex-direction:column;gap:6px;margin:0 0 10px;}
.candidate{text-align:left;border:1px solid var(--line);background:var(--card);border-radius:12px;
  padding:11px 14px;font-size:.92rem;color:var(--ink);font-weight:600;cursor:pointer;box-shadow:var(--shadow);}
.candidate:active{background:#eef5fc;}
.status{text-align:center;color:var(--sub);padding:30px 10px;}
.err{color:#c0392b;}
footer{text-align:center;color:var(--sub);font-size:.72rem;margin-top:10px;}
.reload{margin-top:6px;}
@media(max-width:360px){ .main-text{font-size:1rem;} .slot .wear{display:none;} }