/* Aistea Tools — shared styles (Aistea light theme, icon-free) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root{
  --bg:#FAFAFA; --bg-alt:#F4F4F4; --surface:#FFFFFF;
  --text:#1A1A1A; --muted:#888888; --sub:#AAAAAA; --border:#E8E8E8;
  --accent:#0057FF; --accent-h:#0043CC;
  /* 本体テーマ(aino-hub-v2)と同名のエイリアス。共通フッターCSSをそのまま流用するため */
  --color-bg:#FAFAFA; --color-bg-alt:#F4F4F4; --color-surface:#FFFFFF; --color-text:#1A1A1A; --color-text-muted:#888888; --color-text-sub:#AAAAAA; --color-border:#E8E8E8; --color-accent:#0057FF; --container:1100px; --transition:.2s ease;
  --radius-sm:4px; --radius-md:8px; --radius-lg:16px;
  --shadow-sm:0 1px 4px rgba(0,0,0,.06); --shadow-md:0 4px 16px rgba(0,0,0,.08);
  --font-sans:"Inter","Noto Sans JP",-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:var(--font-sans); background:var(--bg); color:var(--text);
  line-height:1.8; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none;}
a:hover{color:var(--accent-h);}
.wrap{max-width:760px; margin:0 auto; padding:24px 20px 80px;}

.toolnav{font-size:.85rem; margin-bottom:20px;}
.toolnav a{color:var(--muted);}
.toolnav a:hover{color:var(--text);}

header{text-align:center; margin-bottom:28px;}
.logo{font-weight:700; font-size:.95rem; letter-spacing:.01em; color:var(--text);}
.logo .dot{color:var(--accent);}
h1{font-size:clamp(22px,4.2vw,30px); margin:14px 0 8px; font-weight:700; letter-spacing:.01em;}
.lead{color:var(--muted); font-size:.95rem; margin:0;}
.badges{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:18px 0 0;}
.badge{font-size:.72rem; color:var(--muted); background:var(--surface); border:1px solid var(--border); padding:4px 11px; border-radius:999px;}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-sm);}

.drop{
  display:block;
  border:1.5px dashed var(--border); border-radius:var(--radius-md); padding:44px 20px; text-align:center;
  cursor:pointer; transition:border-color .2s,background .2s; background:var(--bg-alt);
}
.drop:hover,.drop.over{border-color:var(--accent); background:#F0F5FF;}
.drop .t{font-weight:600; font-size:.98rem;}
.drop .s{color:var(--muted); font-size:.82rem; margin-top:6px;}
input[type=file]{display:none;}

.field{margin-top:18px;}
.field > label{display:block; font-size:.82rem; color:var(--muted); margin-bottom:7px;}
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
input[type=text],input[type=number],select,textarea{
  width:100%; background:var(--surface); border:1px solid var(--border); color:var(--text);
  border-radius:var(--radius-md); padding:11px 13px; font-size:.95rem; font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent);}
textarea{min-height:200px; resize:vertical; line-height:1.9;}
input[type=range]{width:100%; accent-color:var(--accent);}
.seg{display:inline-flex; background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;}
.seg button{appearance:none; border:0; background:transparent; color:var(--muted); padding:9px 16px; cursor:pointer; font-size:.9rem; font-weight:600;}
.seg button.on{background:var(--accent); color:#fff;}

.btn{
  appearance:none; border:0; cursor:pointer; font-weight:600; font-size:.95rem;
  padding:12px 22px; border-radius:var(--radius-md); color:#fff; background:var(--accent);
  transition:background .2s;
}
.btn:hover{background:var(--accent-h);}
.btn.ghost{background:var(--surface); border:1px solid var(--border); color:var(--text);}
.btn.ghost:hover{background:var(--bg-alt);}
.btn:disabled{opacity:.45; cursor:default;}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px;}

.status{margin-top:18px; display:none; align-items:center; gap:12px; color:var(--muted); font-size:.9rem;}
.status.show{display:flex;}
.spin{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:sp .8s linear infinite; flex:0 0 auto;}
@keyframes sp{to{transform:rotate(360deg)}}
.bar{height:6px; background:var(--bg-alt); border-radius:99px; overflow:hidden; margin-top:6px;}
.bar > i{display:block; height:100%; width:0; background:var(--accent); transition:width .2s;}

.result{display:none; margin-top:24px;}
.result.show{display:block;}
.imgbox{background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;}
.imgbox .h{font-size:.75rem; color:var(--muted); padding:9px 13px; border-bottom:1px solid var(--border);}
.imgbox .b{min-height:160px; display:flex; align-items:center; justify-content:center; padding:14px;}
.checker{
  background-color:#fff;
  background-image:
    linear-gradient(45deg,#eee 25%,transparent 25%),
    linear-gradient(-45deg,#eee 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#eee 75%),
    linear-gradient(-45deg,transparent 75%,#eee 75%);
  background-size:18px 18px; background-position:0 0,0 9px,9px -9px,-9px 0;
}
.imgbox img{max-width:100%; max-height:340px; display:block; border-radius:var(--radius-sm);}

.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:20px;}
@media(max-width:560px){.stats{grid-template-columns:repeat(2,1fr);}}
.stat{background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius-md); padding:15px;}
.stat .n{font-size:1.7rem; font-weight:700; line-height:1.2;}
.stat .l{font-size:.74rem; color:var(--muted); margin-top:4px;}

.note{margin-top:16px; font-size:.8rem; color:var(--muted);}
.err{display:none; margin-top:16px; color:#D64545; font-size:.9rem;}
.err.show{display:block;}

.info{margin-top:40px;}
.info h2{font-size:1.05rem; margin:0 0 14px; font-weight:700;}
.info .grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media(max-width:560px){.info .grid{grid-template-columns:1fr;}}
.feat{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:15px 17px;}
.feat b{display:block; margin-bottom:4px; font-weight:600; font-size:.92rem;}
.feat span{color:var(--muted); font-size:.82rem;}

/* hub */
.tools-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:8px;}
@media(max-width:560px){.tools-grid{grid-template-columns:1fr;}}
.tool-card{display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 20px; transition:border-color .16s,box-shadow .16s;}
.tool-card:hover{border-color:var(--accent); box-shadow:var(--shadow-sm);}
.tool-card .t{font-weight:700; color:var(--text);}
.tool-card .d{color:var(--muted); font-size:.83rem; margin-top:4px;}
.tool-card.soon{opacity:.55; pointer-events:none;}
.tool-card .tag{display:inline-block; font-size:.68rem; color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:2px 9px; margin-top:12px;}

footer{margin-top:48px; text-align:center; color:var(--sub); font-size:.78rem; line-height:1.9;}
footer b{color:var(--muted); font-weight:600;}

/* 左サイドバー＋右レール（aistea-rail.js が各ツールページに注入） */
.aistea-layout{display:flex; gap:24px; max-width:1280px; margin:0 auto; align-items:flex-start;}
.aistea-layout > .wrap{margin:0; flex:1 1 auto; min-width:0; max-width:none;}
.aistea-side{flex:0 0 184px; width:184px; position:sticky; top:20px; padding:24px 0; max-height:calc(100vh - 40px); overflow-y:auto; overscroll-behavior:contain;}
.aistea-side::-webkit-scrollbar{width:6px;}
.aistea-side::-webkit-scrollbar-thumb{background:var(--border); border-radius:99px;}
.aistea-side .side-logo{display:block; font-weight:700; font-size:1.05rem; color:var(--text); text-decoration:none;}
.aistea-side .cat-all{display:block; padding:9px 10px; border-radius:var(--radius-md); font-size:.88rem; font-weight:700; color:var(--text); text-decoration:none; transition:background .15s;}
.aistea-side .cat-all:hover{background:var(--bg-alt);}
.aistea-side .cat-all.on{color:var(--accent);}
.aistea-side .side-logo .dot{color:var(--accent);}
.aistea-side .tagline{font-size:.75rem; color:var(--muted); margin:6px 0 0; line-height:1.7;}
.aistea-side .side-nav{margin-top:20px;}
.aistea-side .side-foot{margin-top:24px; padding-top:20px; border-top:1px solid var(--border); font-size:.74rem; color:var(--muted); line-height:1.6;}
.aistea-side .side-foot p{margin:0 0 8px; display:flex; gap:7px;}
.aistea-side .side-foot p::before{content:'✓'; color:var(--accent); font-weight:700;}
.aistea-side .side-foot .copy{margin-top:14px; color:var(--sub); font-size:.7rem;}
.aistea-side .cat-h{display:flex; justify-content:space-between; align-items:center; width:100%; background:none; border:0; font-family:inherit; cursor:pointer; padding:9px 10px; border-radius:var(--radius-md); font-size:.88rem; font-weight:700; color:var(--text); transition:background .15s;}
.aistea-side .cat-h:hover{background:var(--bg-alt);}
.aistea-side .chev{width:7px; height:7px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(-45deg); transition:transform .18s; margin-right:2px;}
.aistea-side .cat.open .chev{transform:rotate(45deg);}
.aistea-side .sub{display:none; padding:2px 0 6px;}
.aistea-side .cat.open .sub{display:block;}
.aistea-side .sub-item{display:block; padding:6px 10px 6px 16px; font-size:.8rem; color:var(--muted); text-decoration:none; border-radius:var(--radius-md);}
.aistea-side .sub-item:hover{background:var(--bg-alt); color:var(--text);}
.aistea-side .sub-item.on{color:var(--accent); font-weight:700;}
.aistea-rail{flex:0 0 260px; width:260px; padding:24px 0;}
.aistea-rail .rail-h{font-size:.82rem; font-weight:700; margin:0 0 10px; color:var(--text);}
.aistea-rail .rail-item{position:relative; display:block; text-decoration:none; margin-bottom:16px;}
.aistea-rail .rail-thumb{display:block; width:100%; height:140px; border-radius:var(--radius-md); object-fit:cover; background:linear-gradient(135deg,#dbe4ff,#eef2ff); border:1px solid var(--border);}
.aistea-rail .rail-rank{position:absolute; top:8px; left:8px; width:22px; height:22px; background:var(--accent); color:#fff; border-radius:50%; font-size:.72rem; font-weight:700; display:flex; align-items:center; justify-content:center;}
.aistea-rail .rail-t{font-size:.82rem; line-height:1.5; color:var(--text); margin-top:7px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.aistea-rail .rail-item:hover .rail-t{color:var(--accent);}
.aistea-rail .rail-more{display:inline-block; margin:8px 11px; font-size:.78rem;}
/* モバイル上部バー＋サイドバー・ドロワー（PCでは非表示） */
.aistea-mtop{display:none;}
.aistea-side-backdrop{display:none;}
.aistea-mtop__btn{appearance:none; background:none; border:0; padding:7px 6px; margin:0; cursor:pointer; display:flex; flex-direction:column; justify-content:center; gap:4px; width:36px;}
.aistea-mtop__btn span{display:block; height:2px; width:20px; background:var(--text); border-radius:2px;}
.aistea-mtop__logo{font-weight:700; font-size:1.05rem; color:var(--text); text-decoration:none;}
body.aistea-noscroll{overflow:hidden;}
@media(max-width:1080px){
  .aistea-layout{flex-direction:column; gap:0;}
  .aistea-layout > .wrap{max-width:760px; margin:0 auto; align-self:stretch;}
  .aistea-mtop{display:flex; align-items:center; gap:6px; position:sticky; top:0; z-index:900; background:var(--surface); border-bottom:1px solid var(--border); padding:8px 14px;}
  .aistea-side{display:block; position:fixed; top:0; left:0; bottom:0; width:284px; max-width:84vw; margin:0; padding:20px 18px; background:var(--surface); box-shadow:var(--shadow-md); transform:translateX(-100%); transition:transform .25s ease; z-index:1000; max-height:none; overflow-y:auto;}
  .aistea-side.open{transform:none;}
  .aistea-side-backdrop{display:block; position:fixed; inset:0; background:rgba(0,0,0,.42); opacity:0; visibility:hidden; transition:opacity .25s,visibility .25s; z-index:999;}
  .aistea-side-backdrop.open{opacity:1; visibility:visible;}
  .aistea-rail{position:static; width:auto; flex:none; padding:8px 20px 40px; max-width:760px; margin:0 auto; align-self:stretch;}
}
/* 完了時アフィ（トースト） */
.aistea-toast{position:fixed; right:20px; bottom:20px; max-width:330px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:16px 18px; z-index:9999; transform:translateY(16px); opacity:0; transition:transform .25s,opacity .25s;}
.aistea-toast.show{transform:none; opacity:1;}
.aistea-toast .tt{font-weight:700; font-size:.9rem; margin-bottom:4px;}
.aistea-toast .td{font-size:.8rem; color:var(--muted); margin-bottom:12px; line-height:1.6;}
.aistea-toast a.cta{display:inline-block; background:var(--accent); color:#fff; padding:9px 15px; border-radius:var(--radius-md); font-size:.82rem; font-weight:600; text-decoration:none;}
.aistea-toast a.cta:hover{background:var(--accent-h);}
.aistea-toast .x{position:absolute; top:6px; right:9px; cursor:pointer; color:var(--sub); font-size:1.05rem; background:none; border:0; line-height:1;}

/* ══ 共通フッター（本体テーマ aino-hub-v2 と同一） ══ */
.cat-banner{display:flex; height:200px;}
.cat-banner__item{flex:1; background-size:cover; background-position:center; display:flex; flex-direction:column; justify-content:flex-end; padding:24px 28px; position:relative; overflow:hidden; transition:flex .3s ease; text-decoration:none;}
.cat-banner__item::before{content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.2) 60%, transparent 100%);}
.cat-banner__item:hover{flex:1.4;}
.cat-banner__label{position:relative; font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin-bottom:4px;}
.cat-banner__desc{position:relative; font-size:.75rem; color:rgba(255,255,255,.82); line-height:1.4;}
.site-footer{background:var(--color-surface); border-top:1px solid var(--color-border); padding-top:64px;}
.site-footer__inner{max-width:var(--container); margin:0 auto; padding:0 32px 48px; display:grid; grid-template-columns:280px 1fr; gap:64px;}
.site-footer__logo{font-size:1.6rem; font-weight:800; letter-spacing:-.04em; display:block; margin-bottom:12px; color:var(--color-text); text-decoration:none;}
.site-footer__tagline{font-size:.72rem; font-weight:700; letter-spacing:.1em; color:var(--color-text-muted); margin-bottom:12px;}
.site-footer__desc{font-size:.78rem; color:var(--color-text-sub); line-height:1.7;}
.site-footer__sister{font-size:.75rem; color:var(--color-text-sub); margin-top:8px;}
.site-footer__sister a{color:var(--color-text-muted); text-decoration:underline; text-underline-offset:3px;}
.site-footer__sister a:hover{color:var(--color-text);}
.site-footer__menu{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 0; align-content:flex-start;}
.site-footer__menu li a{font-size:.72rem; color:var(--color-text-muted); padding:4px 16px 4px 0; display:block; transition:color var(--transition); text-decoration:none;}
.site-footer__menu li a:hover{color:var(--color-accent);}
.site-footer__bottom{background:var(--color-bg-alt); border-top:1px solid var(--color-border); padding:20px 32px;}
.site-footer__bottom-inner{max-width:var(--container); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.site-footer__copy{font-size:.7rem; color:var(--color-text-sub);}
.site-footer__note{font-size:.65rem; color:var(--color-text-sub);}
@media(max-width:760px){
  .site-footer__inner{grid-template-columns:1fr; gap:32px;}
  .cat-banner{height:auto; flex-direction:column;}
  .cat-banner__item{height:100px;}
  .site-footer__bottom-inner{flex-direction:column; align-items:flex-start; gap:8px;}
}