.inspiration-detail-page { min-height: 100%; color: #eef5f4; background: #050807; }
.inspiration-case-main { position: relative; z-index: 2; width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 132px 0 100px; }
.inspiration-index-main { position: relative; z-index: 2; width: 100%; margin: 0; }
.inspiration-detail-shell { position: relative; overflow: hidden; padding: clamp(26px, 5vw, 54px); border: 1px solid rgba(255, 255, 255, .1); border-radius: 30px; background: radial-gradient(circle at 82% 0%, rgba(0, 168, 255, .08), transparent 24rem), rgba(255, 255, 255, .045); box-shadow: 0 24px 80px rgba(0, 0, 0, .22); }
.inspiration-detail-shell::before { content: ""; position: absolute; top: 0; right: clamp(26px, 5vw, 54px); left: clamp(26px, 5vw, 54px); height: 1px; background: linear-gradient(90deg, rgba(123, 216, 255, 0), rgba(123, 216, 255, .48), rgba(255, 154, 0, .3), rgba(123, 216, 255, 0)); opacity: .72; }
.inspiration-breadcrumb { display: flex; flex-wrap: nowrap; align-items: center; gap: 9px; max-width: 100%; margin-bottom: 34px; overflow: hidden; color: #aebdca; font-size: 13px; }
.inspiration-breadcrumb a,
.inspiration-breadcrumb > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inspiration-breadcrumb a { flex: 0 0 auto; color: #7bd8ff; font-weight: 700; text-decoration: none; }
.inspiration-breadcrumb a:hover { color: #7bd8ff; }

.inspiration-case { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); grid-template-areas: "media intro"; gap: clamp(42px, 6vw, 82px); align-items: start; }
.inspiration-case.is-portrait { grid-template-columns: 233px minmax(0, 1fr); gap: clamp(36px, 4vw, 56px); }
.inspiration-case-player { grid-area: media; width: 100%; justify-self: start; }
.inspiration-case-intro { grid-area: intro; min-width: 0; justify-self: start; text-align: left; }
.inspiration-case-player video { display: block; max-width: 100%; max-height: 620px; margin: 0; border: 1px solid rgba(255, 255, 255, .1); border-radius: 28px; background: #030505; box-shadow: 0 40px 90px rgba(0, 0, 0, .5); object-fit: contain; }
.inspiration-case-player.is-portrait video { width: min(233px, 100%); max-height: 413px; aspect-ratio: 9 / 16; object-fit: cover; }
.inspiration-case-player.is-landscape video { width: 100%; aspect-ratio: 16 / 9; }
.inspiration-case-player.is-square video { width: min(420px, 100%); aspect-ratio: 1 / 1; object-fit: cover; }
.inspiration-case-player > p { display: flex; align-items: center; justify-content: flex-start; gap: 9px; margin: 13px 0 0; color: #82918d; font-size: 12px; text-align: left; }
.inspiration-case-player > p span { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid rgba(123, 216, 255, .14); border-radius: 50%; color: #7bd8ff; font-size: 8px; background: rgba(123, 216, 255, .055); }
.inspiration-case-intro .section-kicker { margin-bottom: 18px; }
.inspiration-case-intro h1 { margin: 0; color: #f7fbfa; font: 720 clamp(42px, 4.6vw, 68px)/1.02 var(--display); letter-spacing: -.055em; }
.inspiration-index-hero h1 { margin: 0; color: #f7fbfa; font: 720 clamp(44px, 6vw, 78px)/1.02 var(--display); letter-spacing: -.055em; }
.inspiration-case-lead { max-width: 700px; margin: 20px 0 0; color: #b7c4c0; font-size: clamp(17px, 1.55vw, 20px); line-height: 1.55; }
.inspiration-case-intro dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0; }
.inspiration-case-intro dl div { padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .075); border-radius: 15px; background: rgba(255, 255, 255, .025); }
.inspiration-case-intro dt { color: #74827f; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.inspiration-case-intro dd { margin: 7px 0 0; color: #dce8e5; font-size: 14px; line-height: 1.45; }
.inspiration-case-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.inspiration-case-details { display: grid; gap: 22px; margin-top: 22px; padding-top: 0; border-top: 0; }
.inspiration-case-details article { width: 100%; border: solid rgba(255, 255, 255, .075); border-width: 1px 0; border-radius: 0; background: rgba(255, 255, 255, .018); }
.inspiration-case-faq { border: solid rgba(255, 255, 255, .075); border-width: 1px 0; border-radius: 0; background: rgba(255, 255, 255, .018); }
.inspiration-case-overview { padding: 36px; border-top: 0 !important; }
.inspiration-case-details h2 { margin: 0; color: #eff6f4; font: 700 clamp(24px, 3vw, 36px)/1.2 var(--display); letter-spacing: -.025em; }
.inspiration-case-overview > p:last-child { max-width: 850px; margin: 18px 0 0; color: #aab8b4; font-size: 17px; line-height: 1.75; }
.inspiration-case-story-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.inspiration-case-story-grid article,
.inspiration-case-adaptation { padding: 32px; }
.inspiration-case-story-grid h2,
.inspiration-case-adaptation h2 { margin-top: 8px; }
.inspiration-case-story-grid article > p:last-child,
.inspiration-case-adaptation > p:last-child { margin: 18px 0 0; color: #aab8b4; font-size: 15px; line-height: 1.72; }
.inspiration-case-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.inspiration-case-columns article { padding: 32px; }
.inspiration-case-columns ul { display: grid; gap: 13px; margin: 22px 0 0; padding: 0; list-style: none; }
.inspiration-case-columns li { position: relative; padding-left: 22px; color: #aab8b4; font-size: 15px; line-height: 1.55; }
.inspiration-case-columns li::before { content: ""; position: absolute; top: .62em; left: 0; width: 7px; height: 7px; border-radius: 50%; background: #7bd8ff; box-shadow: 0 0 14px rgba(123, 216, 255, .45); }
.inspiration-case-uses { padding: 32px; }
.inspiration-case-uses > div { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.inspiration-case-uses span { padding: 10px 13px; border: 1px solid rgba(123, 216, 255, .12); border-radius: 999px; color: #c2d2cf; background: rgba(123, 216, 255, .055); font-size: 12px; }
.inspiration-case-faq { padding: 32px; }
.inspiration-case-faq h2 { margin-top: 8px; }
.inspiration-case-faq > div { display: grid; gap: 10px; margin-top: 24px; }
.inspiration-case-faq details { border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px; background: rgba(3, 8, 8, .45); }
.inspiration-case-faq summary { position: relative; padding: 18px 46px 18px 18px; color: #dce8e5; font-size: 15px; font-weight: 700; cursor: pointer; list-style: none; }
.inspiration-case-faq summary::-webkit-details-marker { display: none; }
.inspiration-case-faq summary::after { content: "+"; position: absolute; top: 50%; right: 18px; color: #7bd8ff; font-size: 20px; font-weight: 400; transform: translateY(-50%); }
.inspiration-case-faq details[open] summary::after { content: "−"; }
.inspiration-case-faq details p { margin: 0; padding: 0 18px 20px; color: #9fada9; font-size: 14px; line-height: 1.68; }
.inspiration-related { padding-top: 46px; }
.inspiration-related h2 { margin-top: 10px; }
.inspiration-related > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.inspiration-related a { display: flex; min-height: 118px; flex-direction: column; justify-content: flex-end; padding: 19px; border: 1px solid rgba(255, 255, 255, .075); border-radius: 16px; color: inherit; background: rgba(255, 255, 255, .025); text-decoration: none; }
.inspiration-related a:hover { border-color: rgba(123, 216, 255, .25); background: rgba(123, 216, 255, .05); }
.inspiration-related small { color: #7bd8ff; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.inspiration-related strong { margin-top: 10px; color: #eef5f4; font-size: 16px; line-height: 1.35; }

.inspiration-index-shell { color: #d1dce4; }
.inspiration-index-hero { max-width: none; padding: 0; }
.inspiration-index-hero h1 { max-width: 920px; margin: 0; color: #fff; font: 700 clamp(34px, 4.2vw, 54px)/1.16 var(--display); letter-spacing: -.035em; }
.inspiration-index-hero > p:last-child { max-width: 700px; margin: 0; }
.inspiration-index-tabs { margin-bottom: 28px; }
.inspiration-index-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.inspiration-index-card { display: flex; min-width: 0; flex-direction: column; padding-bottom: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; color: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018)), rgba(6, 13, 19, .7); box-shadow: 0 16px 38px rgba(0, 0, 0, .17); text-decoration: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.inspiration-index-card[hidden] { display: none; }
.inspiration-index-card:hover { transform: translateY(-4px); border-color: rgba(123, 216, 255, .38); box-shadow: 0 24px 60px rgba(0, 0, 0, .3), 0 0 28px rgba(0, 168, 255, .055); }
.inspiration-index-card > span { display: block; overflow: hidden; aspect-ratio: 4 / 5; background: #0a1113; }
.inspiration-index-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.inspiration-index-card small { margin: 14px 15px 0; color: #7bd8ff; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.inspiration-index-card h2 { display: -webkit-box; margin: 7px 15px 0; overflow: hidden; color: #eef5f4; font: 700 18px/1.22 var(--display); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.inspiration-index-card p { display: -webkit-box; margin: 8px 15px 0; overflow: hidden; color: #9eada8; font-size: 12px; line-height: 1.48; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.inspiration-index-card em { margin: auto 15px 0; padding-top: 12px; color: #7bd8ff; font-size: 11px; font-style: normal; font-weight: 800; }

@media (max-width: 1120px) {
  .inspiration-index-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .inspiration-case-main { width: min(100% - 28px, 760px); padding-top: 116px; }
  .inspiration-index-main { width: 100%; padding-top: 116px; }
  .inspiration-detail-shell { padding: 26px; border-radius: 22px; }
  .inspiration-detail-shell::before { right: 26px; left: 26px; }
  .inspiration-case,
  .inspiration-case.is-portrait { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "media"; gap: 34px; }
  .inspiration-case-details { margin-top: 22px; padding-top: 0; }
  .inspiration-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .inspiration-case-main { width: calc(100% - 28px); padding-top: 104px; }
  .inspiration-index-main { width: 100%; padding-top: 104px; }
  .inspiration-detail-shell { padding: 20px 18px; border-radius: 20px; }
  .inspiration-detail-shell::before { right: 18px; left: 18px; }
  .inspiration-case-intro h1 { font-size: clamp(40px, 13vw, 56px); }
  .inspiration-case-intro dl { grid-template-columns: minmax(0, 1fr); }
  .inspiration-case-actions { flex-direction: column; }
  .inspiration-case-actions .button { width: 100%; }
  .inspiration-index-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .inspiration-index-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; height: 190px; min-height: 0; padding-bottom: 0; }
  .inspiration-index-card > span { grid-row: 1 / 5; grid-column: 1; height: 100%; min-height: 0; aspect-ratio: auto; }
  .inspiration-index-card small { grid-row: 1; grid-column: 2; overflow: hidden; margin: 14px 14px 0; text-overflow: ellipsis; white-space: nowrap; }
  .inspiration-index-card h2 { grid-row: 2; grid-column: 2; max-height: 2.44em; margin: 7px 14px 0; font-size: 16px; }
  .inspiration-index-card p { grid-row: 3; grid-column: 2; max-height: 2.96em; margin: 7px 14px 0; -webkit-line-clamp: 2; }
  .inspiration-index-card em { grid-row: 4; grid-column: 2; margin: 0 14px 13px; padding-top: 8px; }
  .inspiration-case-columns,
  .inspiration-case-story-grid { grid-template-columns: minmax(0, 1fr); }
  .inspiration-case-overview,
  .inspiration-case-story-grid article,
  .inspiration-case-adaptation,
  .inspiration-case-columns article,
  .inspiration-case-uses,
  .inspiration-case-faq { padding: 24px; }
  .inspiration-related > div,
  .inspiration-index-grid { grid-template-columns: minmax(0, 1fr); }
}