/* ===== Hero =====
   Reuses .guide-hero wholesale (breadcrumb + intro, no CTA) — this page has
   no media/CTA badge, so only the .guide-hero__row child rendered is the
   intro block. Breadcrumb separator is 46px here (matches works/sauna-map's
   one-off override), not the shared 30px default. */

.column-hero__crumb-sep {
  width: 46px;
}

@media (min-width: 992px) {
  .column-hero__crumb-sep {
    width: 46px;
  }
}

/* ===== List section layout (categories | article list | sidebar) ===== */

.column-list {
  padding-block: 48px 64px;
}

.column-layout {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media (min-width: 992px) {
  .column-list {
    padding-block: 48px 88px;
  }

  .column-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 80px;
  }
}

/* ---- Categories ---- */

.column-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
}

.column-categories__item {
  position: relative;
  padding-left: 12px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 15px;
  color: var(--color-gray-400);
  text-align: left;
}

.column-categories__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-gold);
  transform: translateY(-50%);
}

.column-categories__item.is-active {
  color: var(--color-black);
}

@media (min-width: 992px) {
  .column-categories {
    flex-direction: column;
    flex-shrink: 0;
    flex-wrap: nowrap;
    gap: 32px;
    width: auto;
  }
}

/* ---- Article list ---- */

.column-main {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}

@media (min-width: 992px) {
  .column-main {
    flex: 1 1 auto;
  }
}

.column-main__list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.column-list__empty {
  font-size: 14px;
  color: var(--color-gray-400);
}

.column-pagination__arrow:disabled {
  opacity: 0.3;
  pointer-events: none;
}

.column-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-gray-300);
  background: none;
  border-radius: 0;
}

.column-card__media {
  aspect-ratio: 277 / 156;
}

.column-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.column-card__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0.03em;
  border-bottom: none;
  padding-bottom: 0;
}

.column-card__desc {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-black);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.column-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.column-card__date {
  font-size: 12px;
}

@media (min-width: 992px) {
  .column-main__list {
    gap: 40px;
  }

  .column-card {
    flex-direction: row;
    gap: 16px;
    padding-bottom: 40px;
  }

  .column-card__media {
    flex-shrink: 0;
    width: 277px;
  }

  .column-card__body {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: space-between;
    padding-inline: 16px;
  }
}

/* ---- Pagination ---- */

.column-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.column-pagination__arrow img {
  width: 18px;
  height: 18px;
}

.column-pagination__arrow--prev img {
  transform: scaleX(-1);
}

.column-pagination__pages {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 12px;
  color: var(--color-gray-400);
}

.column-pagination__pages .is-active {
  color: var(--color-black);
}

/* ---- Sidebar ---- */

.column-sidebar {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 992px) {
  /* Sticks ~10px below the fixed-on-scroll .site-subheader (90px tall on
     PC). Both parent rows (.column-layout, .column-detail-row) already use
     align-items:flex-start, which sticky needs to have room to travel. If
     the sidebar is taller than the space under the header (short
     viewports), it scrolls internally instead of being cut off. */
  .column-sidebar {
    flex-shrink: 0;
    width: 250px;
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

.column-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px 8px 24px;
  border: 1px solid var(--color-black);
  border-radius: 100px;
}

/* The input's own outline is off (it would be a rectangle inside the pill),
   so the pill draws the keyboard focus ring instead. */
.column-search:has(input:focus-visible) {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.column-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: var(--color-black);
  background: none;
}

.column-search input::placeholder {
  color: #888888;
}

.column-search button {
  flex-shrink: 0;
  display: flex;
}

.column-search button img {
  width: 24px;
  height: 24px;
}

.column-widget {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.column-widget__title {
  padding: 10px 8px;
  background: rgba(151, 134, 92, 0.2);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.05em;
}

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

.column-widget__text-item,
.column-widget__media-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 8px;
  border-bottom: 1px solid var(--color-gray-300);
}

.column-widget__text-item > a,
.column-widget__media-item > a {
  display: flex;
  flex-direction: column;
  gap: inherit;
  color: inherit;
  text-decoration: none;
}

.column-widget__media-item {
  gap: 16px;
}

.column-widget__date {
  font-size: 12px;
}

.column-widget__item-title {
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.05em;
}

.column-widget__media {
  aspect-ratio: 393 / 221;
}

.column-widget__media-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---- "資料請求" (document request) CTA card ----
   Figma builds the photo stack from a precise rotated two-layer composite;
   simplified here to two overlapping photos tilted in opposite directions,
   consistent with this project's precedent for simplifying Figma-only
   decorative composites (see CLAUDE.md / system_status.md). */

.column-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 16px;
  background: var(--color-dkblue);
  border-radius: 4px;
  position: relative;
}

/* Inset frame line: 1px white, 6px inside the card's outer edge, with its
   own 4px corners (an outline can't take a radius of
   its own, so this is a pseudo-element). Absolutely positioned, so the
   card's size/padding are unchanged; pointer-events:none keeps the
   button inside clickable. */
.column-cta::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--color-white);
  border-radius: 4px;
  pointer-events: none;
}

.column-cta__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--color-gray-300);
}

.column-cta__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.05em;
  color: var(--color-white);
}

.column-cta__badge {
  padding: 2px 8px 1px;
  border-radius: 100px;
  background: var(--color-white);
  color: var(--color-gold);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.05em;
}

.column-cta__desc {
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.05em;
  color: var(--color-white);
  text-align: center;
}

.column-cta__photos {
  position: relative;
  width: 100%;
  height: 141px;
  border-radius: 4px;
  background: #CDC4B0;
  overflow: hidden;
}

.column-cta__photo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92px;
  height: 128px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35);
}

.column-cta__photo--back {
  transform: translate(-101%, -67%) rotate(17deg);
}

.column-cta__photo--front {
  transform: translate(2%, -31%) rotate(17deg);
}

.column-cta__btn {
  width: 100%;
  justify-content: center;
}

/* Close button (Figma 1829:8003) — SP/tablet banner only, see below. */
.column-cta__close {
  display: none;
}

/* SP + tablet (Figma 1796:10694 is the SP frame; tablet keeps the same
   horizontal banner per explicit instruction): the sidebar card becomes a
   compact horizontal banner pinned to the bottom of the viewport, 4px from
   the left/right edges and 10px from the bottom (tablet: max 400px wide,
   bottom-right). PC keeps the stacked
   card above. The design has no
   button — the pill-btn link is stretched over the whole banner (its label
   kept for screen readers) so the banner itself is the tap target. The
   photo composite follows Figma's actual geometry here (two photos rotated
   16.78deg as one group, centres pre-rotated into place) since the box is
   too small for the simplified PC tilt to read correctly. */
@media (max-width: 991px) {
  .column-cta {
    position: fixed;
    left: 4px;
    right: 4px;
    bottom: 10px;
    z-index: 100; /* under .site-subheader (150) / .mobile-menu (200) */
    display: grid;
    grid-template-columns: minmax(0, 177px) 159px;
    grid-template-rows: auto auto;
    justify-content: space-between;
    align-items: start;
    gap: 10px 8px;
    /* 4px outer + 1px frame + 8px inner (Figma: pl-8 on the text column,
       pr-7 on the row, py-8) */
    padding: 13px 12px 13px 13px;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  }

  /* Toggled by js/column-cta.js while the site footer is on screen, so the
     banner never sits over the footer. */
  .column-cta.is-footer-visible {
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    pointer-events: none;
  }

  .column-cta::before {
    inset: 4px;
  }

  /* No tablet frame in Figma: capped at 400px and anchored bottom-right
     (right/bottom offsets as SP); the text column takes whatever width is
     left beside the photo box. */
  @media (min-width: 768px) {
    .column-cta {
      left: auto;
      width: 400px; /* explicit: with left:auto a fixed box would shrink-to-fit */
      grid-template-columns: minmax(0, 1fr) 159px;
      column-gap: 24px;
    }
  }

  .column-cta__head {
    align-self: end;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .column-cta__title,
  .column-cta__badge {
    font-weight: 400;
    line-height: 1;
  }

  .column-cta__desc {
    font-size: 10px;
    letter-spacing: 0.02em;
    text-align: left;
  }

  .column-cta__photos {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    width: 159px;
    height: 97px;
    border-radius: 2.577px;
  }

  .column-cta__photo {
    top: 0;
    left: 0;
    height: 92.349px;
    border-radius: 0.54px;
    background: var(--color-white);
    box-shadow: 0.516px 0.645px 1.342px rgba(0, 0, 0, 0.38);
  }

  .column-cta__photo--back {
    width: 64.275px;
    transform: translate(15.86px, -8.94px) rotate(16.78deg);
  }

  .column-cta__photo--front {
    width: 65.308px;
    transform: translate(79.27px, 19.49px) rotate(16.78deg);
  }

  .column-cta__btn {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
  }

  .column-cta__btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .column-cta__btn img {
    display: none;
  }

  /* Top-right close button, poking ~4px out past the banner's top/right
     edges; z-index above the stretched link (1) so it isn't swallowed by
     it. Clicking it sets .is-dismissed (js/column-cta.js). */
  .column-cta__close {
    display: block;
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 2;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .column-cta__close img {
    display: block;
    width: 24px;
    height: 24px;
  }

  .column-cta.is-dismissed {
    display: none;
  }
}

/* =====================================================================
   Detail page (column/detail.html) — second consumer of this file, same
   pattern as works.css serving both works/top.html and works/detail.html
   (shared family stylesheet, not a separate "-detail.css" file, since the
   sidebar widgets/CTA below are reused wholesale from the list page).
   Header/mobile-menu/footer are byte-identical copies of column/top.html's.
   Page background is cream per Figma (bg-[#f5f3ef] on the root node),
   scoped to this page only — column/top.html stays white + watermark.
   ===================================================================== */

body.column-detail-page {
  background: var(--color-cream);
}

/* ---- Hero: breadcrumb (reuses .shared__crumb + the 46px
   .column-hero__crumb-sep already defined above) + title/meta + a single
   large photo. No SP frame exists for this page (PC-only per Figma, same
   as works/detail.html) — mobile/tablet get a simple stacked fallback. ---- */

.column-detail-hero {
  position: relative;
  padding-block: 24px 48px;
}

.column-detail-hero__body {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.column-detail-hero__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.column-detail-hero__heading {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.5;
}

.column-detail-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.column-detail-hero__date {
  font-size: 14px;
}

.column-detail-hero__tags {
  display: flex;
  gap: 8px;
}

.column-detail-hero__tags .tag-pill {
  font-size: 14px;
}

.column-detail-hero__media {
  aspect-ratio: 4 / 3;
}

@media (min-width: 992px) {
  .column-detail-hero__body {
    margin-top: 72px;
    gap: 48px;
  }

  .column-detail-hero__heading {
    font-size: 30px;
  }

  .column-detail-hero__meta {
    gap: 24px;
  }

  .column-detail-hero__date {
    font-size: 15px;
  }

  .column-detail-hero__media {
    aspect-ratio: auto;
    height: 525px;
  }
}

/* ---- Body: article column + sidebar (reuses .column-sidebar/.column-widget/
   .column-cta verbatim from the list section above). Desktop content width
   (1120px container) matches Figma's own math for this section exactly:
   758px article + 112px gap + 250px sidebar = 1120px. ---- */

.column-detail-body {
  padding-block: 40px;
}

@media (min-width: 992px) {
  .column-detail-body {
    padding-block: 32px 88px;
  }
}

.column-detail-row {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media (min-width: 992px) {
  .column-detail-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 112px;
  }
}

.column-detail-article {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}

@media (min-width: 992px) {
  .column-detail-article {
    flex: 1 1 auto;
    gap: 72px;
  }
}

.column-detail-article__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 992px) {
  .column-detail-article__body {
    gap: 48px;
  }
}

/* ---- Rich-text body: the `column` schema's `body` field is a single
   microCMS WYSIWYG field, so (like news.css's .news-detail-content) this is
   styled by raw tag rather than per-block classes. ---- */

.column-detail-content {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-black);
}

.column-detail-content > * {
  margin: 0;
}

.column-detail-content > * + * {
  margin-top: 24px;
}

.column-detail-content h2 {
  padding-bottom: 16px;
  font-weight: 500;
  font-size: 18px;
  border-bottom: 1px solid var(--color-gray-300);
}

.column-detail-content h2 + p,
.column-detail-content h2 + ul,
.column-detail-content h2 + ol {
  margin-top: 16px;
}

.column-detail-content h3 {
  padding-left: 16px;
  font-weight: 500;
  font-size: 16px;
  border-left: 1px solid var(--color-gold);
}

.column-detail-content h3 + p,
.column-detail-content h3 + ul,
.column-detail-content h3 + ol {
  margin-top: 12px;
}

.column-detail-content ul {
  padding-left: 20px;
  list-style: disc;
}

.column-detail-content li + li {
  margin-top: 8px;
}

.column-detail-content figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-gray-400);
}

.column-detail-content a {
  text-decoration: underline;
}

.column-detail-content__media {
  aspect-ratio: 4 / 3;
}

@media (min-width: 992px) {
  .column-detail-content {
    font-size: 15px;
  }

  .column-detail-content > * + * {
    margin-top: 32px;
  }

  .column-detail-content h2 {
    font-size: 24px;
  }

  .column-detail-content h2 + p,
  .column-detail-content h2 + ul,
  .column-detail-content h2 + ol {
    margin-top: 24px;
  }

  .column-detail-content h3 {
    padding-left: 24px;
    font-size: 20px;
  }

  .column-detail-content h3 + p,
  .column-detail-content h3 + ul,
  .column-detail-content h3 + ol {
    margin-top: 16px;
  }

  .column-detail-content figcaption {
    font-size: 14px;
  }

  .column-detail-content__media {
    aspect-ratio: 758 / 403;
    max-width: 758px;
  }
}

/* ---- Lead paragraph block (unused now that .column-detail-content renders
   the CMS body field directly — kept in case a future schema change
   reintroduces structured lead/TOC/points sections) ---- */

.column-detail-lead {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-black);
}

.column-detail-lead p {
  margin: 0;
}

@media (min-width: 992px) {
  .column-detail-lead {
    font-size: 15px;
  }
}

/* ---- 目次 (table of contents) ---- */

.column-detail-toc {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 16px;
}

.column-detail-toc__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
}

.column-detail-toc__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.column-detail-toc__item {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.column-detail-toc__number {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  color: var(--color-gold);
}

.column-detail-toc__text {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.8;
}

@media (min-width: 992px) {
  .column-detail-toc {
    gap: 24px;
    padding-left: 32px;
  }

  .column-detail-toc__title {
    font-size: 20px;
  }

  .column-detail-toc__item {
    gap: 16px;
  }

  .column-detail-toc__number {
    font-size: 30px;
  }

  .column-detail-toc__text {
    font-size: 18px;
  }
}

/* ---- ポイント (point) box ---- */

.column-detail-points {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 4px;
}

.column-detail-points__head {
  display: flex;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--color-gray-300);
}

.column-detail-points__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
}

.column-detail-points__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 20px;
  list-style: disc;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-black);
}

@media (min-width: 992px) {
  .column-detail-points {
    padding: 24px 32px;
  }

  .column-detail-points__title {
    font-size: 20px;
  }

  .column-detail-points__list {
    font-size: 15px;
  }
}

/* ---- Numbered article sections (01, 02...) — a gold Cormorant Garamond
   number + Zen Kaku Gothic New title over a solid border-bottom, distinct from
   .work-detail-divider-title's left-border treatment since Figma uses a
   different shape for this page. ---- */

.column-detail-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.column-detail-section__head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-gray-300);
}

.column-detail-section__number {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  color: var(--color-gold);
}

.column-detail-section__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.8;
}

.column-detail-section__media {
  background: var(--color-white);
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.column-detail-section__body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-black);
}

.column-detail-section__body p {
  margin: 0;
}

@media (min-width: 992px) {
  .column-detail-section {
    gap: 32px;
  }

  .column-detail-section__head {
    gap: 24px;
  }

  .column-detail-section__number {
    font-size: 40px;
  }

  .column-detail-section__title {
    font-size: 24px;
  }

  .column-detail-section__media {
    aspect-ratio: 758 / 403;
  }

  .column-detail-section__body {
    font-size: 15px;
  }
}

/* ---- Back-to-list link: reuses .link-arrow wholesale, just flips the
   shared "more" chevron to point left (same flip used by
   .column-pagination__arrow--prev above). ---- */

.column-detail-back img {
  transform: scaleX(-1);
}