/* 공개 다이브오리 소개. 구간 리듬·구간 머리·주제 탭·카드(.public-card)·FAQ·끝 행동 카드는 공개 공통(public.css)이고, 여기는 카드 그림 면에 띄우는 서비스 예시(x-public.service-preview)와 하단 빠른 기록 접기만 둔다. */
.diveory-page { --diveory-copy-width: 48rem; }
.diveory-quick { scroll-margin-top: var(--space-24); }

/* 예시는 입력 화면이 아니다. 장식 탭이나 실제처럼 보이는 가짜 버튼을 두지 않는다. */
.diveory-demo { min-width: 0; overflow: hidden; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-ambient); }
.diveory-demo__caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); border-bottom: var(--border-width) solid var(--color-border); padding: var(--space-4) var(--space-5); color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.diveory-demo__caption > span:first-child { color: var(--color-brand); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-relaxed); }
.diveory-demo__trip-cover { position: relative; min-height: 15rem; color: var(--color-surface); }
.diveory-demo__trip-cover > .generated-image { position: absolute; inset: 0; }
.diveory-demo__trip-cover img { width: 100%; height: 100%; object-fit: cover; }
.diveory-demo__trip-cover::after { position: absolute; inset: 0; background: linear-gradient(transparent 15%, rgb(0 20 30 / .72)); content: ""; }
.diveory-demo__trip-cover > div { position: absolute; z-index: 1; right: var(--space-6); bottom: var(--space-6); left: var(--space-6); display: grid; gap: var(--space-2); }
.diveory-demo__trip-cover > div > span { font-size: var(--font-size-sm); }
.diveory-demo__trip-cover strong { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); }
.diveory-demo__trip-pages { padding-inline: var(--space-6); }
.diveory-demo__trip-pages > div { display: grid; gap: var(--space-2); padding-block: var(--space-5); }
.diveory-demo__trip-pages > div + div { border-top: var(--border-width) solid var(--color-border); }
.diveory-demo__trip-pages dt { display: flex; align-items: center; gap: var(--space-2); color: var(--color-brand); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.diveory-demo__trip-pages dd { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.diveory-demo__heading { display: grid; gap: var(--space-2); padding: var(--space-6); }
.diveory-demo__heading > span { color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.diveory-demo__heading strong { color: var(--color-brand); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }
.diveory-demo__announcement { display: grid; gap: var(--space-4); margin-inline: var(--space-6); border-radius: var(--radius-lg); padding: var(--space-6); background: var(--color-brand-soft); }
.diveory-demo__announcement > span { color: var(--color-brand); font-size: var(--font-size-xs); }
.diveory-demo__announcement strong { color: var(--color-brand); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }
.diveory-demo__announcement p { color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-loose); }
.diveory-demo__rows { margin: var(--space-3) var(--space-6) var(--space-5); }
.diveory-demo__rows > div { display: grid; gap: var(--space-2); padding-block: var(--space-4); }
.diveory-demo__rows dt { color: var(--color-brand); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.diveory-demo__rows dd { color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.diveory-demo__timeline { display: grid; gap: var(--space-6); margin: var(--space-3) var(--space-6) var(--space-8); padding-left: var(--space-4); border-left: var(--border-width-accent) solid var(--color-brand-light); list-style: none; }
.diveory-demo__timeline li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--space-4); color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.diveory-demo__timeline time { color: var(--color-brand); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.diveory-demo__packed { display: flex; align-items: center; gap: var(--space-4); border-top: var(--border-width) solid var(--color-border); padding: var(--space-6); background: var(--color-brand-soft); color: var(--color-brand); }
.diveory-demo__packed > .icon { flex-shrink: 0; }
.diveory-demo__packed span { font-size: var(--font-size-xs); }
.diveory-demo__packed strong { display: block; margin-top: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.diveory-demo__settlement { margin-inline: var(--space-6); border-top: var(--border-width) solid var(--color-border); }
.diveory-demo__settlement > div { display: flex; justify-content: space-between; gap: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); padding-block: var(--space-5); font-size: var(--font-size-sm); }
.diveory-demo__settlement dt { color: var(--color-text-secondary); }
.diveory-demo__settlement dd { color: var(--color-brand); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.diveory-demo__receipt-note { padding: var(--space-5) var(--space-6); color: var(--color-text-secondary); font-size: var(--font-size-xs); line-height: var(--line-height-loose); }
.diveory-demo__reuse { display: grid; gap: var(--space-5); padding: var(--space-3) var(--space-6) var(--space-8); }
.diveory-demo__reuse > div { display: grid; gap: var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.diveory-demo__reuse > div:last-child { border-color: var(--color-brand-light); background: var(--color-brand-soft); }
.diveory-demo__reuse span, .diveory-demo__reuse p { color: var(--color-text-secondary); font-size: var(--font-size-xs); line-height: var(--line-height-loose); }
.diveory-demo__reuse strong { color: var(--color-brand); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.diveory-demo__reuse > .navigation-arrow { justify-self: center; transform: rotate(90deg); }

.diveory-quick { max-width: var(--diveory-copy-width); margin-top: var(--space-10); border-block: var(--border-width) solid var(--color-border-strong); }
.diveory-quick > summary { display: flex; min-height: var(--control-height-lg); align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-5); list-style: none; cursor: pointer; }
.diveory-quick > summary strong { color: var(--color-brand); font-weight: var(--font-weight-semibold); }
.diveory-quick > summary span > span { display: block; margin-top: var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.diveory-quick > summary::-webkit-details-marker { display: none; }
.diveory-quick > summary > .icon { flex-shrink: 0; color: var(--color-brand); transition: transform var(--duration-base) var(--ease-standard); }
.diveory-quick[open] > summary > .icon { transform: rotate(180deg); }
.diveory-create { padding-block: var(--space-6) var(--space-8); }
.diveory-create h2 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }
.diveory-create > header > p { line-height: var(--line-height-loose); }
.diveory-create__storage { border-left: var(--border-width-accent) solid var(--color-border-strong); padding-left: var(--space-4); color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.diveory-editor { min-width: 0; }
@media (max-width: 47.999rem) {
    .diveory-demo__trip-cover { min-height: 13rem; }
}
@media (max-width: 39.999rem) {
    .diveory-demo__caption { padding-inline: var(--space-4); }
    .diveory-demo__heading, .diveory-demo__packed { padding: var(--space-5); }
    .diveory-demo__reuse { padding-inline: var(--space-5); }
}