/* circles.html: visual language follows the daily dashboard in ui-v3.css.
   Keep this file to layout and hierarchy only; no separate product palette. */

/* Page shell / background ------------------------------------------------- */
body[data-market="otome"] {
  background-color:#fffafd;
  background-image:
    radial-gradient(circle at 12% 0%, rgba(255,183,213,.16), transparent 31%),
    radial-gradient(circle at 92% 16%, rgba(255,218,235,.26), transparent 30%),
    linear-gradient(180deg,#fffdfd 0%,#fff9fc 47%,#fffdfd 100%);
  background-size:100vw 100vh;
  background-repeat:no-repeat;
  background-position:top center;
}
.longterm-shell {
  width:min(100%,1040px);
  margin:0 auto;
  padding:max(28px,env(safe-area-inset-top)) 18px 100px;
}
.longterm-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 4px 14px;
}
.back-link,
.longterm-top .sync-status {
  min-height:38px;
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(255,255,255,.86);
  background:rgba(255,255,255,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.back-link {
  padding:9px 12px;
  border-radius:999px;
  color:var(--muted);
  font-size:var(--fs-2xs);
  font-weight:var(--fw-bold);
  text-decoration:none;
}

/* Daily-style hero ------------------------------------------------------- */
.longterm-hero.card {
  position:relative;
  overflow:hidden;
  margin:0 0 18px;
  padding:24px 22px 22px;
  border:1px solid rgba(255,255,255,.88);
  border-radius:30px;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,245,249,.82));
  box-shadow:var(--shadow),inset 0 1px 0 #fff;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.longterm-hero.card::before,
.longterm-hero.card::after {
  content:"";
  position:absolute;
  pointer-events:none;
  border-radius:50%;
}
.longterm-hero.card::before {
  width:145px;
  height:145px;
  right:-44px;
  top:-58px;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.98),rgba(255,126,177,.12) 47%,rgba(255,126,177,.025) 72%);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:inset 12px 12px 30px rgba(255,255,255,.78),inset -15px -17px 35px rgba(255,120,170,.08);
}
.longterm-hero.card::after {
  width:48px;
  height:48px;
  right:88px;
  top:78px;
  background:rgba(255,255,255,.58);
  box-shadow:inset 5px 5px 14px rgba(255,255,255,.92),0 8px 20px rgba(255,107,164,.06);
}
.longterm-hero .eyebrow,
.longterm-hero h1,
.longterm-hero p,
#heroMeta { position:relative; z-index:1; }
.longterm-hero .eyebrow {
  display:block;
  margin:0;
  color:var(--accent-dark);
  font-size:var(--fs-xs);
  font-weight:var(--fw-black);
  letter-spacing:.05em;
}
.longterm-hero h1 {
  max-width:82%;
  margin:7px 0;
  color:var(--ink);
  font-size:var(--fs-2xl);
  font-weight:var(--fw-black);
  line-height:1.12;
  letter-spacing:-.045em;
}
.longterm-hero p {
  max-width:78%;
  margin:0;
  color:#6f5d67;
  font-size:var(--fs-sm);
  line-height:1.7;
}
.longterm-hero #heroMeta {
  display:inline-flex;
  width:auto;
  max-width:100%;
  margin-top:14px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.58);
  color:var(--muted);
  font-size:var(--fs-2xs);
  font-weight:var(--fw-bold);
  line-height:1.4;
}

/* Shared section rhythm ------------------------------------------------- */
.section-block { margin-top:28px; }
.section-heading { margin:0 4px 12px; }
.section-heading .eyebrow {
  color:var(--accent-dark);
  font-size:var(--fs-2xs);
  font-weight:var(--fw-black);
  letter-spacing:.08em;
}
.section-heading h3 {
  margin:5px 0 0;
  color:var(--ink);
  font-size:var(--fs-xl);
  font-weight:var(--fw-black);
  line-height:1.25;
  letter-spacing:-.04em;
}
.section-note {
  margin:-5px 4px 12px;
  color:var(--muted);
  font-size:var(--fs-xs);
  line-height:1.7;
}
.method-note {
  margin:12px 4px 0;
  padding:0;
  color:var(--muted);
  font-size:var(--fs-2xs);
  line-height:1.65;
}

/* How to read: turn the wall of text into four scan-friendly steps. */
.howto-list {
  counter-reset:circle-step;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.howto-list li {
  counter-increment:circle-step;
  position:relative;
  min-width:0;
  margin:0;
  padding:15px 15px 15px 50px;
  border:1px solid rgba(255,255,255,.85);
  border-radius:17px;
  background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(255,255,255,.48));
  box-shadow:0 10px 28px rgba(173,82,119,.08),inset 0 1px 0 rgba(255,255,255,.92);
  color:var(--muted);
  font-size:var(--fs-xs);
  line-height:1.7;
}
.howto-list li::before {
  content:counter(circle-step);
  position:absolute;
  left:14px;
  top:14px;
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:9px;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-size:var(--fs-xs);
  font-weight:var(--fw-black);
}
.howto-list b {
  display:block;
  margin-bottom:3px;
  color:var(--ink);
  font-size:var(--fs-sm);
  line-height:1.55;
}

/* Classification / diagrams ------------------------------------------- */
.diagram-card {
  margin-top:0;
  padding:18px 16px 12px;
  overflow:hidden;
  text-align:center;
  border-radius:20px;
}
.flow-svg,.dist-svg { display:block; width:100%; max-width:560px; height:auto; margin:0 auto; }
.flow-box { fill:rgba(255,255,255,.78); stroke:var(--accent); stroke-width:1.4; }
.flow-box.q { fill:rgba(255,255,255,.96); stroke:var(--accent-dark); }
.flow-box.muted { fill:rgba(143,124,135,.10); stroke:var(--muted); }
.flow-box.dark { fill:var(--accent-dark); stroke:var(--accent-dark); }
.flow-box.good { fill:var(--good); stroke:var(--good); }
.flow-text { font-size:var(--fs-sm); font-weight:var(--fw-semibold); fill:var(--ink); }
.flow-text.muted { fill:var(--muted); font-weight:var(--fw-medium); }
.flow-text.on-dark { fill:#fff; font-size:var(--fs-md); font-weight:var(--fw-bold); }
.flow-line { fill:none; stroke:var(--muted); stroke-width:1.6; }
.flow-arrowhead { fill:var(--muted); }
.flow-label { font-size:var(--fs-2xs); font-weight:var(--fw-semibold); fill:var(--accent-dark); }
.flow-caption { font-size:var(--fs-nano); fill:var(--muted); }
.dist-axis { stroke:var(--muted); stroke-width:1; opacity:.45; }
.dist-bars rect { fill:var(--accent-soft); }
.dist-mark { fill:var(--accent-dark); }
.dist-mark.p90 { fill:var(--accent); }
.dist-mark.median { fill:var(--good); }
.dist-label { font-size:var(--fs-2xs); font-weight:var(--fw-semibold); fill:var(--accent-dark); }
.dist-caption { margin:6px 0 0; color:var(--muted); font-size:var(--fs-2xs); }

/* Group switch matches the daily segmented controls. */
#groupTabs {
  width:min(100%,310px);
  max-width:none;
  margin:0 0 12px;
  padding:4px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:19px;
  background:rgba(255,255,255,.46);
}
#groupTabs .mini-segment { min-height:40px; }

/* Circle list ----------------------------------------------------------- */
.circle-cards {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.circle-card {
  min-width:0;
  padding:16px;
  border-radius:20px;
}
.circle-card-name {
  min-height:26px;
  margin-bottom:11px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.76);
}
.circle-name-link,.circle-name-plain {
  color:var(--ink);
  font-size:var(--fs-md);
  font-weight:var(--fw-black);
  line-height:1.45;
  letter-spacing:-.015em;
}
.circle-name-link { text-decoration:none; }
.circle-name-link .jump-hint {
  display:inline-block;
  margin-left:5px;
  color:var(--accent-dark);
  font-size:var(--fs-2xs);
  font-weight:var(--fw-bold);
  white-space:nowrap;
}
.circle-card-stats {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  margin:0 0 11px;
  color:var(--muted);
  font-size:var(--fs-2xs);
}
.circle-card-stats>span {
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:4px;
  padding:8px 9px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:12px;
  background:rgba(255,255,255,.36);
  line-height:1.35;
}
.circle-card-stats b {
  color:var(--ink);
  font-size:var(--fs-sm);
  font-weight:var(--fw-black);
}
.circle-card-tags { display:flex; flex-wrap:wrap; gap:6px; }
.tag-chip {
  padding:5px 9px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  background:var(--accent-pale);
  color:var(--accent-dark);
  font-size:var(--fs-2xs);
  font-weight:var(--fw-bold);
  line-height:1.3;
}
.muted-note { color:var(--muted); font-size:var(--fs-2xs); line-height:1.5; }

/* Faction / market comparison ------------------------------------------ */
.faction-cards {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.faction-card {
  min-width:0;
  padding:16px;
  border-radius:20px;
}
.faction-card.ref { grid-column:1/-1; background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,255,255,.42)); }
.faction-name {
  margin-bottom:11px;
  padding-bottom:9px;
  border-bottom:1px solid rgba(255,255,255,.76);
  color:var(--ink);
  font-size:var(--fs-md);
  font-weight:var(--fw-black);
  line-height:1.4;
  letter-spacing:-.015em;
}
.faction-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.faction-stat {
  min-width:0;
  padding:9px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.36);
}
.faction-stat span {
  display:block;
  color:var(--muted);
  font-size:var(--fs-2xs);
  font-weight:var(--fw-bold);
  line-height:1.35;
}
.faction-stat b {
  display:block;
  margin-top:4px;
  color:var(--ink);
  font-size:var(--fs-lg);
  font-weight:var(--fw-black);
  line-height:1.15;
  letter-spacing:-.03em;
}
.faction-meta {
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.76);
  color:var(--muted);
  font-size:var(--fs-2xs);
  line-height:1.5;
}

/* Glossary -------------------------------------------------------------- */
.glossary {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
  padding:15px;
  border-radius:20px;
  font-size:var(--fs-xs);
  line-height:1.65;
}
.glossary>b {
  grid-column:1/-1;
  display:block;
  margin:0 0 2px;
  color:var(--ink);
  font-size:var(--fs-sm);
  font-weight:var(--fw-black);
}
.gterm {
  display:block;
  min-width:0;
  padding:10px 11px;
  border-radius:12px;
  background:rgba(255,255,255,.34);
  color:var(--muted);
}
.gterm b { color:var(--accent-dark); font-weight:var(--fw-black); }

/* Case studies ---------------------------------------------------------- */
.case-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.case-card {
  min-width:0;
  padding:16px;
  border-radius:20px;
  scroll-margin-top:16px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.case-card summary { cursor:pointer; list-style:none; }
.case-card summary::-webkit-details-marker { display:none; }
.case-card summary::after {
  content:'詳しく見る ＋';
  display:inline-flex;
  align-items:center;
  margin-top:10px;
  padding:6px 9px;
  border-radius:999px;
  background:var(--accent-pale);
  color:var(--accent-dark);
  font-size:var(--fs-2xs);
  font-weight:var(--fw-black);
}
.case-card[open] summary::after { content:'閉じる −'; }
.case-card[open] {
  outline:0;
  border-color:color-mix(in srgb,var(--accent) 30%,white);
  box-shadow:0 18px 42px rgba(173,82,119,.12),inset 0 1px 0 rgba(255,255,255,.92);
}
.tier-badge,.case-card .read-count {
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:3px 8px;
  border-radius:999px;
  font-size:var(--fs-nano);
  font-weight:var(--fw-black);
  line-height:1.2;
}
.tier-badge { margin-right:5px; }
.tier-badge.sustained { background:rgba(71,169,138,.14); color:var(--good); }
.tier-badge.flash { background:var(--accent-pale); color:var(--accent-dark); }
.case-card .circle-name { color:var(--muted); font-size:var(--fs-2xs); font-weight:var(--fw-bold); }
.case-card .read-count { margin-left:4px; background:rgba(255,255,255,.58); color:var(--muted); }
.case-card h4 {
  margin:9px 0 7px;
  color:var(--ink);
  font-size:var(--fs-md);
  font-weight:var(--fw-black);
  line-height:1.5;
  letter-spacing:-.02em;
}
.case-card .verdict {
  margin:0;
  color:var(--accent-dark);
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  line-height:1.65;
}
.case-card ul {
  margin:13px 0 0;
  padding:12px 0 0 19px;
  border-top:1px solid rgba(255,255,255,.76);
}
.case-card li { margin-bottom:7px; color:var(--ink); font-size:var(--fs-xs); line-height:1.7; }
.case-card li:last-child { margin-bottom:0; }
.case-card b { color:var(--accent-dark); font-weight:var(--fw-bold); }

.takeaway {
  margin:10px 0 0;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:14px;
  background:rgba(255,255,255,.42);
  color:var(--ink);
  font-size:var(--fs-xs);
  line-height:1.7;
}
.takeaway b { color:var(--accent-dark); }
.synthesis {
  margin-top:12px;
  padding:17px 18px;
  border-radius:20px;
}
.synthesis h4 { margin:4px 0 10px; color:var(--ink); font-size:var(--fs-md); font-weight:var(--fw-black); }
.synthesis ol { margin:0; padding-left:20px; }
.synthesis li { margin-bottom:7px; color:var(--ink); font-size:var(--fs-xs); line-height:1.7; }
.synthesis li:last-child { margin-bottom:0; }

@supports(-webkit-touch-callout:none) {
  .card { backdrop-filter:none; -webkit-backdrop-filter:none; }
  .back-link,.longterm-top .sync-status { backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(255,255,255,.90); }
}

@media(max-width:720px) {
  .longterm-shell { padding-left:12px; padding-right:12px; }
  .longterm-top { margin-left:2px; margin-right:2px; }
  .longterm-hero.card { padding:21px 18px 19px; border-radius:26px; }
  .longterm-hero h1 { max-width:88%; font-size:var(--fs-xl); }
  .longterm-hero p { max-width:88%; font-size:var(--fs-xs); }
  .longterm-hero.card::before { width:120px; height:120px; right:-45px; top:-50px; }
  .longterm-hero.card::after { display:none; }
  .section-block { margin-top:24px; }
  .section-heading h3 { font-size:20px; }
  .howto-list,.circle-cards,.faction-cards,.glossary,.case-grid { grid-template-columns:1fr; }
  .faction-card.ref,.glossary>b { grid-column:auto; }
  #groupTabs { width:100%; }
  .circle-card,.faction-card,.case-card { padding:14px; }
}

@media(max-width:420px) {
  .longterm-shell { padding-left:10px; padding-right:10px; }
  .longterm-top { gap:8px; }
  .back-link,.longterm-top .sync-status { min-height:36px; padding:8px 10px; font-size:10px; }
  .longterm-hero.card { margin-bottom:15px; }
  .longterm-hero h1 { max-width:92%; }
  .longterm-hero p { max-width:94%; }
  .howto-list li { padding:13px 13px 13px 46px; }
  .howto-list li::before { left:12px; top:12px; }
  .circle-card-stats { grid-template-columns:1fr 1fr; gap:6px; }
  .circle-card-stats>span { padding:7px 8px; }
  .faction-stat { padding:8px 9px; }
}