:root{
  --header-height:64px;
  --gap:24px;
  --max-width:1200px;
  --accent:#0b76ff;
  --bg:#fafafa;
  --card-border:#e6e6e6;
  --text:#222;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

header{
  position:fixed;
  inset:0 0 auto 0;
  height:var(--header-height);
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 18px;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,0.06);
  z-index:1100;
}
#site-logo{
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:0.2px;
}

#header-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
}

.contact-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 2px 6px rgba(11,118,255,0.12);
  transition:transform .08s ease, box-shadow .12s ease;
  position:relative;
}
.contact-btn:focus{ outline:3px solid rgba(11,118,255,0.18); outline-offset:2px; }
.contact-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(11,118,255,0.18); }
.contact-btn svg{ width:20px; height:20px; display:block; fill:currentColor }

.contact-btn[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  background:rgba(0,0,0,0.85);
  color:#fff;
  font-size:12px;
  padding:6px 8px;
  border-radius:4px;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
  z-index:1300;
  max-width:calc(100vw - 40px);
  overflow:hidden;
  text-overflow:ellipsis;
  box-sizing:border-box;
}
.contact-btn[data-tooltip]:hover::after,
.contact-btn[data-tooltip]:focus::after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

main#main{
  width:100%;
  max-width:var(--max-width);
  margin: calc(var(--header-height) + 20px) auto 40px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:var(--gap);
  align-items:start;
  padding:0 16px;
  box-sizing:border-box;
  flex:1 0 auto;
}

.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:2000;
}

.column-title{
  font-size:1.6rem;
  font-weight:700;
  margin-bottom:12px;
  color:var(--text);
  line-height:1.05;
}

#left-column .grid-sns{
  display:grid;
  grid-template-columns:repeat(3,72px);
  gap:10px;
  justify-content:start;
}
.sns-btn{
  display:flex;
  width:72px;
  height:72px;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  background:#fff;
  border:1px solid var(--card-border);
  border-radius:8px;
  overflow:hidden;
  text-decoration:none;
  font-size:12px;
  color:#222;
  padding:6px;
}
.sns-btn .sns-label{ line-height:1.1; z-index:1; }
.sns-btn .sns-icon{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
}
.sns-btn.has-image .sns-icon{ opacity:1; }
.sns-btn.has-image .sns-label{ opacity:0; }
.sns-btn[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translateX(-50%);
  white-space:nowrap;
  background:rgba(0,0,0,0.85);
  color:#fff;
  font-size:12px;
  padding:6px 8px;
  border-radius:4px;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
  z-index:5;
  max-width:calc(100vw - 40px);
  overflow:hidden;
  text-overflow:ellipsis;
}
.sns-btn[data-tooltip]:hover::after,
.sns-btn[data-tooltip]:focus::after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.sns-spacer{ width:72px; height:72px; }

.tools-header{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  margin-bottom:12px;
}
.tools-header .tools-title{ margin-bottom:0; }
.readme-row{ margin-bottom:12px; }
.readme-link{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid transparent;
  font-weight:600;
}
.readme-link:hover,
.readme-link:focus{
  border-bottom-color:currentColor;
}

#tools-list{ display:flex; flex-direction:column; gap:12px; }
.tool-card{
  display:block;
  padding:16px;
  text-decoration:none;
  border:1px solid var(--card-border);
  border-radius:8px;
  background:#fff;
  color:inherit;
  transition:box-shadow .12s ease, transform .08s ease;
}
.tool-card:hover{ box-shadow:0 6px 18px rgba(0,0,0,0.06); transform:translateY(-2px); }
.tool-card h3{ margin-bottom:6px; font-size:1.05rem; }
.tool-card p{ margin:0; color:#555; line-height:1.4; }

@media (max-width:768px){
  main#main{
    grid-template-columns:1fr;
    gap:16px;
    margin: calc(var(--header-height) + 12px) auto 24px;
    padding:0 12px;
  }
  .column-title{ font-size:1.25rem }
  .contact-btn[data-tooltip]::after{
    top:auto;
    bottom:calc(100% + 8px);
    left:50%;
    transform:translateX(-50%);
    max-width:calc(100vw - 32px);
  }
}

@media (max-width:420px){
  #left-column .grid-sns{ grid-template-columns:repeat(2,64px); gap:8px }
  .sns-btn{ width:64px; height:64px; font-size:11px; }
  .sns-spacer{ width:64px; height:64px; }
}

a:focus{ outline:3px solid rgba(11,118,255,0.12); outline-offset:2px; border-radius:6px; }

#site-logo a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}
#site-logo a:focus {
  outline: 3px solid rgba(11,118,255,0.18);
  outline-offset: 2px;
  border-radius: 4px;
}