/* RHT LLC site.css — static html build
 *
 * Consolidates Nuxt 版の各 <style scoped> をフラット化し、Vuetify が提供して
 * いた drawer / outlined input / dialog 等を vanilla CSS で代替する。
 *
 *   A. Header CTA / Drawer / Footer (旧 layouts/default.vue)
 *   B. Hero               (旧 components/Brand.vue)
 *   C. News table         (旧 components/News.vue)
 *   D. Service cards      (旧 components/Service.vue)
 *   E. Member cards       (旧 components/Member.vue)
 *   F. Company list       (旧 components/Company.vue)
 *   G. Contact form       (旧 components/Contact.vue)
 *   H. SectionTitle inv.  (旧 components/parts/SectionTitle.vue)
 *   I. Outlined input + native dialog (Vuetify 置換のために新規)
 */

/* ============================================================
 * A. Header CTA / Drawer / Footer
 * ============================================================ */

.site-header__cta { display: inline-flex; align-items: center; }

.site-header__menu {
  display: none;
  background: transparent;
  border: 0;
  padding: var(--space-2);
  color: var(--ink-950);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.site-header__menu:hover { background: var(--surface-subtle); }

/* Desktop / mobile breakpoint mirrors Vuetify md (960px) */
@media (max-width: 959.98px) {
  .site-nav,
  .site-header__cta { display: none; }
  .site-header__menu { display: inline-flex; }
}

.rht-btn__arrow {
  font-family: var(--font-mono);
  font-weight: 500;
  margin-left: var(--space-1);
}

/* Drawer */
.site-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 86vw);
  background: var(--white);
  border-left: 1px solid var(--border-subtle);
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-out);
  z-index: var(--z-modal);
  padding: var(--space-16) var(--space-6) var(--space-6);
  overflow-y: auto;
}

.site-drawer nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.site-drawer nav a {
  display: block;
  padding: var(--space-3) var(--space-2);
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text-strong);
  text-decoration: none;
  letter-spacing: 0;
  border-radius: var(--radius-sm);
}
.site-drawer nav a:hover { background: var(--surface-subtle); color: var(--text-strong); }

.site-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 26, 0.45);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
  z-index: var(--z-overlay);
}

body.is-drawer-open .site-drawer { transform: translateX(0); }
body.is-drawer-open .site-drawer-overlay { opacity: 1; }
body.is-drawer-open { overflow: hidden; }

/* Footer */
.site-footer {
  background: var(--ink-950);
  color: var(--ink-300);
  padding: var(--space-16) 0 var(--space-8);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--ink-800);
}

.site-footer__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--white);
}

.site-footer__brand p {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--ink-400);
  max-width: 24em;
  margin: var(--space-4) 0 0;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

.site-footer__h {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-200);
  margin-bottom: var(--space-3);
}

.site-footer__cols a,
.site-footer__meta {
  display: block;
  font-size: var(--text-sm);
  color: var(--ink-400);
  padding: var(--space-1) 0;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-footer__cols a:hover { color: var(--white); }

.site-footer__bar {
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-6);
  font-size: var(--text-xs);
  color: var(--ink-500);
}

.site-footer__mono { font-family: var(--font-mono); }

@media (max-width: 920px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: var(--space-10); }
  .site-footer__bar { flex-direction: column; gap: var(--space-2); }
}

/* ============================================================
 * B. Hero (Brand)
 * ============================================================ */

.hero {
  padding: var(--space-24) 0 var(--space-20);
  border-bottom: 1px solid var(--border-subtle);
  background-image: radial-gradient(circle at 1px 1px, var(--ink-100) 1px, transparent 0);
  background-size: 28px 28px;
}

.hero__split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-16);
  align-items: center;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-5xl);
  line-height: 1.12;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: var(--space-4) 0 var(--space-5);
}

.hero__title-accent { color: var(--brand); }

.hero__sub {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  max-width: 30em;
  margin: 0 0 var(--space-8);
}

.hero__ctas {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.hero__stats {
  display: flex;
  gap: var(--space-10);
  margin-top: var(--space-12);
}

.hero__stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

.hero__stat-unit {
  font-size: var(--text-xl);
  font-weight: 600;
  margin-left: 2px;
}

.hero__stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.hero__panel-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
}

.hero__panel-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: var(--space-5);
}

.hero__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hero__steps li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-md);
  color: var(--text-strong);
}

.hero__step-n {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--brand);
  width: 2.2em;
  font-size: var(--text-md);
}

@media (max-width: 920px) {
  .hero { padding: var(--space-16) 0 var(--space-12); }
  .hero__split { grid-template-columns: 1fr; gap: var(--space-10); }
  .hero__title { font-size: var(--text-4xl); }
  .hero__stats { flex-wrap: wrap; gap: var(--space-6); }
}

@media (max-width: 600px) {
  .hero__title { font-size: var(--text-3xl); }
}

/* ============================================================
 * C. News
 * ============================================================ */

.news__card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.news__date {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--brand);
  letter-spacing: var(--tracking-wide);
}

.news__link {
  color: var(--text-strong);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.news__link:hover { color: var(--brand); }
.news__link--plain { cursor: default; }
.news__link--plain:hover { color: var(--text-strong); }

.news__chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

.news__chip--brand   { background: var(--blue-50);  color: var(--blue-700); }
.news__chip--success { background: var(--green-50); color: var(--green-700); }
.news__chip--neutral { background: var(--ink-100);  color: var(--ink-700); }

/* News table — vanilla replacement for v-data-table */
.news__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
}

.news__table tr.is-hidden { display: none; }

.news__table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.news__table tr:last-child td { border-bottom: 0; }

.news__table td.news__cell-date { width: 128px; }
.news__table td.news__cell-chip { width: 160px; text-align: right; }

.news__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.news__footer-size {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.news__footer-size select {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-body);
}

.news__footer-nav { display: inline-flex; gap: var(--space-2); }

.news__footer-btn {
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-3);
  cursor: pointer;
  color: var(--text-body);
  font-family: var(--font-mono);
  line-height: 1;
}
.news__footer-btn:hover:not([disabled]) { background: var(--surface-subtle); color: var(--text-strong); }
.news__footer-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 600px) {
  .news__table td.news__cell-date,
  .news__table td.news__cell-chip { width: auto; }
  .news__table td { padding: var(--space-3); }
}

/* ============================================================
 * D. Service
 * ============================================================ */

.service__group + .service__group { margin-top: var(--space-16); }

.service__group-head { margin-bottom: var(--space-6); }

.service__group-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
}

.service__group-text {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  margin: var(--space-3) 0 var(--space-5);
  max-width: 56em;
}

.service__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.service__card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.service__card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.service__card--static { cursor: default; }
.service__card--static:hover {
  border-color: var(--border-default);
  box-shadow: none;
  transform: none;
}

.service__card--disabled {
  opacity: 0.55;
  pointer-events: none;
}

.service__card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-4);
}

.service__card-media img {
  max-width: 70%;
  max-height: 80px;
  object-fit: contain;
}

.service__card-media img[src$=".svg"] {
  width: 60%;
  max-width: 220px;
  height: auto;
  max-height: none;
}

.service__card-body { padding: var(--space-5); }

.service__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.service__card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
}

.service__card-status {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-subtle);
  background: var(--ink-100);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
}

.service__card-desc {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  margin: 0;
}

.service__cta { margin-top: var(--space-4); }

@media (max-width: 920px) {
  .service__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .service__grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * E. Member
 * ============================================================ */

.member__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: var(--space-5);
}

.member__card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.member__avatar {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
}

.member__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.member__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.member__desc {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-body);
}

@media (max-width: 600px) {
  .member__grid { grid-template-columns: 1fr; }
  .member__card { grid-template-columns: 72px 1fr; padding: var(--space-5); }
  .member__avatar { width: 72px; height: 72px; }
}

/* ============================================================
 * F. Company
 * ============================================================ */

.company__card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-6);
}

.company__list { margin: 0; padding: 0; }

.company__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-6);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.company__row:last-child { border-bottom: 0; }

.company__term {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  align-self: center;
}

.company__desc {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-strong);
}

@media (max-width: 600px) {
  .company__row { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* ============================================================
 * G. Contact
 * ============================================================ */

.contact__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-16);
  align-items: start;
}

.contact__points {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--text-body);
}

.contact__points li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.contact__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--green-50);
  color: var(--green-700);
  font-size: var(--text-xs);
  font-weight: 700;
  font-family: var(--font-mono);
}

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

.contact__form {
  display: flex;
  flex-direction: column;
}

.contact__submit {
  width: 100%;
  margin-top: var(--space-2);
}

.contact__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.contact__dialog {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contact__dialog-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.contact__dialog-text {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
}

.contact__dialog-action { align-self: stretch; }

@media (max-width: 920px) {
  .contact__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .contact__card { padding: var(--space-6); }
}

/* ============================================================
 * H. SectionTitle inverse variant
 * ============================================================ */

.rht-section-head--inverse .rht-eyebrow { color: var(--blue-500); }
.rht-section-head--inverse .rht-section-title { color: var(--white); }
.rht-section-head--inverse .rht-section-lead { color: var(--ink-300); }

/* ============================================================
 * I. Outlined input + native dialog
 *    Vanilla replacement for v-text-field/v-textarea outlined dense
 *    and v-dialog persistent.
 * ============================================================ */

.rht-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.rht-input { display: block; }

.rht-input__label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.rht-input__field {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  box-sizing: border-box;
}

textarea.rht-input__field {
  resize: vertical;
  min-height: 120px;
  line-height: var(--leading-normal);
}

.rht-input__field:hover { border-color: var(--border-strong); }

.rht-input__field:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--shadow-focus);
}

.rht-input__field::placeholder { color: var(--text-subtle); }

.rht-input--invalid .rht-input__field {
  border-color: var(--danger);
}
.rht-input--invalid .rht-input__field:focus {
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.25);
}

.rht-input__error {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--danger);
  min-height: 1em;
}

.rht-input--hidden { display: none !important; }

/* Native <dialog> reset + backdrop */
.contact-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 420px;
  width: calc(100% - 32px);
}
.contact-dialog::backdrop { background: rgba(10, 14, 26, 0.45); }