/* Takapi Laboratory - Light theme
   Bright background / dark text
*/

:root{
  --bg: #f6f7f9;          /* 全体背景 */
  --surface: #ffffff;    /* カード背景 */
  --surface-2: #f0f2f5;
  --text: #1f2328;       /* 本文文字 */
  --muted: #555;         /* 補足文字 */
  --link: #0b63c7;
  --link-hover: #084b9a;
  --accent: #2f7dd1;
  --border: #dcdfe3;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --radius: 18px;
  --maxw: 980px;
}

/* Reset */
*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  line-height: 1.8;
  color: var(--text);
  background: var(--bg);
}

img{ max-width:100%; height:auto; }
a{ color: var(--link); text-decoration: none; }
a:hover{ color: var(--link-hover); text-decoration: underline; }
p{ margin: .9em 0; }
small{ color: var(--muted); }

/* Skip link */
.skip-link{
  position:absolute;
  left:-9999px;
}
.skip-link:focus{
  position:fixed;
  left:12px;
  top:12px;
  padding:.6em .9em;
  background:#000;
  color:#fff;
  border-radius: 8px;
  z-index:9999;
}

/* Layout */
main{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px 16px 64px;
}

/* Header */
header{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 32px 16px 18px;
}
header a{ text-decoration:none; }
header h1{
  margin:0;
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1.2;
  text-align: center;
  padding: 30px 20px;
  border-radius: var(--radius);
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* Article cards */
article{
  margin: 22px 0;
  padding: 22px 22px 20px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* Headings */
article h1{
  margin: 0 0 .8em;
  font-size: 1.5rem;
  font-weight: 700;
  padding-bottom: .3em;
  border-bottom: 3px solid var(--accent);
}

article h2{
  margin: 1.6em 0 .5em;
  font-size: 1.15rem;
  font-weight: 700;
  padding-left: .6em;
  border-left: 6px solid var(--accent);
}

article h3, article h4{
  margin: 1.2em 0 .4em;
  font-weight: 600;
}

/* Lists */
ul, ol{ padding-left: 1.4em; }
li{ margin: .4em 0; }

/* Shop grid */
ul.shop{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

li.shop{
  padding: 16px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

li.shop h2{
  margin-top: 0;
  border-left: none;
  padding-left: 0;
  font-size: 1.05rem;
}

/* Footer */
footer{
  max-width: var(--maxw);
  margin: 0 auto 40px;
  padding: 20px 16px;
  text-align: center;
  color: var(--muted);
}

/* Legacy clears */
br[clear], br[all]{ display:none; }

/* Responsive */
@media (max-width: 860px){
  ul.shop{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px){
  header h1{ padding: 22px 14px; }
  article{ padding: 18px 14px; }
  ul.shop{ grid-template-columns: 1fr; }
}