/* ============================================================
   IDFL JAPAN — shared components.

   Only components that are genuinely shared or newly built live here. Page
   CSS that already works is left alone.
   ============================================================ */

/* ==========================================================
   Carousel dots (最新情報バー)
   The dot stays visually 7px. The hit area is a transparent box on the
   button itself, so nothing about the bar's appearance changes while the
   target grows from 7px to 36/44px. Spacing is widened at the same time:
   a bigger hit area on top of 13px centres would only trade a small target
   for overlapping ones.
   ========================================================== */
.idfl-dots{
  display:flex;
  align-items:center;
  gap:26px;                     /* 7px dot + 26px gap = 33px between centres */
}
.idfl-dot{
  position:relative;
  width:7px; height:7px;
  padding:0; border:0;
  border-radius:50%;
  background:var(--idfl-border-strong);
  cursor:pointer;
  flex:0 0 auto;
  transition:background var(--idfl-dur-hover) var(--idfl-ease-out);
}
.idfl-dot::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:var(--idfl-target-comfort);
  height:var(--idfl-target-comfort);
  transform:translate(-50%,-50%);
}
@media (pointer:coarse){
  .idfl-dot::after{ width:var(--idfl-target-touch); height:var(--idfl-target-touch); }
}
.idfl-dot:hover{ background:var(--idfl-brand-400); }
.idfl-dot[aria-current="true"]{ background:var(--idfl-brand-500); }

/* ==========================================================
   Q&A — self-help
   ========================================================== */
.idfl-qa-hero{
  background:linear-gradient(180deg,var(--idfl-bg-brand-soft),var(--idfl-bg));
  border-bottom:1px solid var(--idfl-border-soft);
  padding:var(--idfl-space-8) var(--idfl-gutter) calc(var(--idfl-space-7) + var(--idfl-space-6));
}
.idfl-qa-hero__inner{ max-width:820px; margin:0 auto; text-align:center; }
.idfl-qa-hero h1{
  font-size:clamp(22px,3.4vw,30px);
  font-weight:900; color:var(--idfl-text);
  margin:0 0 var(--idfl-space-2); letter-spacing:.01em;
}
.idfl-qa-hero p.lead{
  font-size:15px; color:var(--idfl-text-muted);
  margin:0 0 var(--idfl-space-5);
}
.idfl-qa-search{ position:relative; }
.idfl-qa-search input{
  width:100%;
  min-height:56px;
  padding:0 46px 0 46px;
  border:1.5px solid var(--idfl-border);
  border-radius:var(--idfl-radius-lg);
  background:var(--idfl-bg);
  font:400 16px/1.5 var(--idfl-font-sans);   /* 16px avoids iOS zoom-on-focus */
  color:var(--idfl-text);
  transition:border-color var(--idfl-dur-hover) var(--idfl-ease-out),
             box-shadow var(--idfl-dur-hover) var(--idfl-ease-out);
}
.idfl-qa-search input:focus{
  border-color:var(--idfl-brand-500);
  box-shadow:0 0 0 4px var(--idfl-bg-brand-soft);
  outline:none;
}
.idfl-qa-search__icon{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  color:var(--idfl-text-muted); font-size:17px; pointer-events:none;
}
.idfl-qa-search__clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:var(--idfl-target-comfort); height:var(--idfl-target-comfort);
  display:none; align-items:center; justify-content:center;
  background:none; border:0; border-radius:50%;
  color:var(--idfl-text-muted); font-size:16px; cursor:pointer;
}
.idfl-qa-search__clear.is-on{ display:inline-flex; }
.idfl-qa-search__clear:hover{ background:var(--idfl-bg-soft); color:var(--idfl-text); }
@media (pointer:coarse){
  .idfl-qa-search__clear{ width:var(--idfl-target-touch); height:var(--idfl-target-touch); }
}

.idfl-qa-h2{
  font-size:14px; font-weight:900; color:var(--idfl-text);
  margin:var(--idfl-space-7) 0 0; letter-spacing:.02em;
}

/* qa.html paints a photographic body background. The self-help content needs
   its own opaque surface, otherwise the question list sits directly on the
   photo and becomes hard to read. */
main.qa-wrap{
  background:var(--idfl-bg);
  border:1px solid var(--idfl-border-soft);
  border-radius:var(--idfl-radius-lg);
  max-width:960px;
  padding:var(--idfl-space-5) var(--idfl-space-6) var(--idfl-space-7);
  margin:calc(var(--idfl-space-7) * -1) auto var(--idfl-space-8);
  position:relative;
}
@media (max-width:620px){
  main.qa-wrap{
    border-radius:0; border-left:0; border-right:0;
    padding:var(--idfl-space-5) var(--idfl-space-4) var(--idfl-space-7);
    margin-top:0;
  }
}

/* ---- Category cards ---- */
.idfl-qa-cats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--idfl-space-3);
  margin:var(--idfl-space-6) 0 0;
}
.idfl-qa-cat{
  display:block; text-align:left;
  background:var(--idfl-bg);
  border:1.5px solid var(--idfl-border);
  border-radius:var(--idfl-radius-lg);
  padding:var(--idfl-space-4);
  cursor:pointer;
  font-family:inherit;
  transition:border-color var(--idfl-dur-hover) var(--idfl-ease-out),
             background var(--idfl-dur-hover) var(--idfl-ease-out);
}
.idfl-qa-cat:hover{ border-color:var(--idfl-brand-400); background:var(--idfl-bg-brand-soft); }
.idfl-qa-cat[aria-pressed="true"]{
  border-color:var(--idfl-brand-500);
  background:var(--idfl-bg-brand-soft);
}
.idfl-qa-cat__name{ font-size:15px; font-weight:900; color:var(--idfl-text); display:block; }
.idfl-qa-cat__count{ font-size:12px; color:var(--idfl-brand-600); font-weight:700; display:block; margin-top:2px; }
.idfl-qa-cat__hint{ font-size:12px; color:var(--idfl-text-muted); display:block; margin-top:var(--idfl-space-2); line-height:1.7; }

/* ---- Guided flow ---- */
.idfl-qa-guide{
  border:1px solid var(--idfl-border);
  border-radius:var(--idfl-radius-lg);
  padding:var(--idfl-space-4) var(--idfl-space-5);
  margin-top:var(--idfl-space-5);
  background:var(--idfl-bg);
}
.idfl-qa-guide__q{
  font-size:13px; font-weight:900; color:var(--idfl-text);
  margin:0 0 var(--idfl-space-3);
}
.idfl-qa-guide__opts{ display:flex; flex-wrap:wrap; gap:var(--idfl-space-2); }
.idfl-qa-guide__opt{
  border:1.5px solid var(--idfl-border);
  background:var(--idfl-bg);
  border-radius:var(--idfl-radius-pill);
  padding:0 16px;
  min-height:var(--idfl-target-comfort);
  display:inline-flex; align-items:center; gap:6px;
  font:700 13.5px/1 var(--idfl-font-sans);
  color:var(--idfl-text-soft);
  cursor:pointer;
  transition:background var(--idfl-dur-hover) var(--idfl-ease-out),
             border-color var(--idfl-dur-hover) var(--idfl-ease-out);
}
.idfl-qa-guide__opt:hover{ border-color:var(--idfl-brand-400); background:var(--idfl-bg-brand-soft); }
.idfl-qa-guide__opt[aria-pressed="true"]{
  background:var(--idfl-brand-500); border-color:var(--idfl-brand-500);
  color:var(--idfl-text-on-brand);
}
.idfl-qa-guide__opt .n{ font-size:11.5px; opacity:.75; }
.idfl-qa-guide__reset{
  background:none; border:0; cursor:pointer;
  font:700 12.5px/1 var(--idfl-font-sans);
  color:var(--idfl-brand-600);
  min-height:var(--idfl-target-comfort);
  padding:0 8px;
}
.idfl-qa-guide__reset:hover{ text-decoration:underline; }
@media (pointer:coarse){
  .idfl-qa-guide__opt{ min-height:var(--idfl-target-touch); }
}

/* ---- Result bar ---- */
.idfl-qa-resultbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--idfl-space-3);
  margin:var(--idfl-space-6) 0 var(--idfl-space-3);
  padding-bottom:var(--idfl-space-2);
  border-bottom:2px solid var(--idfl-border-soft);
}
.idfl-qa-resultbar__count{ font-size:13.5px; font-weight:900; color:var(--idfl-text); }
.idfl-qa-resultbar__count b{ color:var(--idfl-brand-600); }

/* ---- Accordion ---- */
.idfl-qa-list{ list-style:none; margin:0; padding:0; }
.idfl-qa-item{ border-bottom:1px solid var(--idfl-border-soft); }
.idfl-qa-item__btn{
  width:100%; text-align:left;
  display:flex; align-items:flex-start; gap:var(--idfl-space-3);
  background:none; border:0; cursor:pointer;
  padding:var(--idfl-space-4) var(--idfl-space-2);
  min-height:48px;                       /* continuous list, primary control */
  font-family:inherit;
  color:var(--idfl-text);
  transition:background var(--idfl-dur-hover) var(--idfl-ease-out);
}
.idfl-qa-item__btn:hover{ background:var(--idfl-bg-brand-soft); }
.idfl-qa-item__q{ flex:1; font-size:15px; font-weight:700; line-height:1.7; }
.idfl-qa-item__chev{
  flex:0 0 auto; width:10px; height:10px; margin-top:7px;
  border-right:2px solid var(--idfl-text-muted);
  border-bottom:2px solid var(--idfl-text-muted);
  transform:rotate(45deg);
  transition:transform var(--idfl-dur-accordion) var(--idfl-ease-out);
}
.idfl-qa-item.is-open .idfl-qa-item__chev{ transform:rotate(-135deg); }
.idfl-qa-item__panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--idfl-dur-accordion) var(--idfl-ease-out);
}
.idfl-qa-item.is-open .idfl-qa-item__panel{ grid-template-rows:1fr; }
.idfl-qa-item__panelinner{ overflow:hidden; }
.idfl-qa-item__a{
  padding:0 var(--idfl-space-2) var(--idfl-space-5) calc(var(--idfl-space-3) + 10px);
  font-size:14.5px; line-height:2; color:var(--idfl-text-soft);
  white-space:pre-wrap; word-break:break-word;
}
/* No JS: grid-template-rows animation never runs, so make sure the answer is
   simply present and readable. */
html:not(.js) .idfl-qa-item__panel{ grid-template-rows:1fr; }

.idfl-qa-item__meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.idfl-qa-badge{
  font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:var(--idfl-radius-pill);
  background:var(--idfl-bg-soft); color:var(--idfl-text-muted);
}
.idfl-qa-badge.is-new{ background:#fee2e2; color:#b91c1c; }
.idfl-qa-badge.is-sec{ background:var(--idfl-bg-brand-soft); color:var(--idfl-brand-700); }
.idfl-qa-item__imgs{ display:flex; flex-wrap:wrap; gap:var(--idfl-space-2); padding:0 var(--idfl-space-2) var(--idfl-space-4) calc(var(--idfl-space-3) + 10px); }
.idfl-qa-item__imgs figure{ margin:0; max-width:340px; }
.idfl-qa-item__imgs img{ width:100%; height:auto; border:1px solid var(--idfl-border); border-radius:var(--idfl-radius-sm); display:block; }
.idfl-qa-item__imgs figcaption{ font-size:12px; color:var(--idfl-text-muted); margin-top:4px; line-height:1.7; }
.idfl-qa-item__link{
  display:inline-flex; align-items:center; min-height:var(--idfl-target-comfort);
  margin:0 0 var(--idfl-space-4) calc(var(--idfl-space-3) + 10px);
  font-size:13.5px; font-weight:700; color:var(--idfl-brand-600);
}
.idfl-qa-item__perma{
  background:none; border:0; cursor:pointer; color:var(--idfl-text-faint);
  font-size:12px; padding:0 8px;
  min-height:var(--idfl-target-comfort);
  display:inline-flex; align-items:center;
}
.idfl-qa-item__perma:hover{ color:var(--idfl-brand-600); }

mark.qa-hl{ background:#fff3b0; color:inherit; padding:0 1px; border-radius:2px; }

/* Deep-linked question gets a brief, non-moving emphasis. */
.idfl-qa-item:target,
.idfl-qa-item.is-linked{ background:var(--idfl-bg-brand-soft); }

/* ---- Empty state ---- */
.idfl-qa-empty{
  border:1px dashed var(--idfl-border);
  border-radius:var(--idfl-radius-lg);
  padding:var(--idfl-space-6);
  text-align:center;
}
.idfl-qa-empty p{ margin:0 0 var(--idfl-space-4); font-size:14.5px; color:var(--idfl-text-soft); }
.idfl-qa-empty__acts{ display:flex; flex-wrap:wrap; gap:var(--idfl-space-2); justify-content:center; }
.idfl-qa-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--idfl-target-touch);
  padding:0 20px; border-radius:var(--idfl-radius-pill);
  font:700 13.5px/1 var(--idfl-font-sans); text-decoration:none; cursor:pointer;
  border:1.5px solid var(--idfl-brand-500);
  transition:background var(--idfl-dur-hover) var(--idfl-ease-out);
}
.idfl-qa-btn--primary{ background:var(--idfl-brand-500); color:var(--idfl-text-on-brand); }
.idfl-qa-btn--primary:hover{ background:var(--idfl-brand-700); }
.idfl-qa-btn--ghost{ background:var(--idfl-bg); color:var(--idfl-brand-600); }
.idfl-qa-btn--ghost:hover{ background:var(--idfl-bg-brand-soft); }

/* ==========================================================
   Homepage — the three entry points
   ========================================================== */
.idfl-entry{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--idfl-space-4);
}
.idfl-entry__card{
  display:flex; flex-direction:column;
  border:1.5px solid var(--idfl-border);
  border-radius:var(--idfl-radius-lg);
  padding:var(--idfl-space-5);
  background:var(--idfl-bg);
  text-decoration:none;
  color:var(--idfl-text);
  transition:border-color var(--idfl-dur-hover) var(--idfl-ease-out),
             background var(--idfl-dur-hover) var(--idfl-ease-out);
}
.idfl-entry__card:hover{ border-color:var(--idfl-brand-400); background:var(--idfl-bg-brand-soft); }
.idfl-entry__step{
  font:900 11px/1 var(--idfl-font-mono);
  letter-spacing:.14em; color:var(--idfl-brand-500);
  margin-bottom:var(--idfl-space-3);
}
.idfl-entry__title{ font-size:17px; font-weight:900; margin:0 0 var(--idfl-space-2); }
.idfl-entry__desc{ font-size:13.5px; line-height:1.9; color:var(--idfl-text-muted); margin:0 0 var(--idfl-space-4); }
.idfl-entry__go{ margin-top:auto; font-size:13.5px; font-weight:700; color:var(--idfl-brand-600); }
@media (max-width:900px){ .idfl-entry{ grid-template-columns:1fr; } }