/* ═══════════════════════════════════════════════════════════
   daily-stone.css — หน้าชิม /daily-stone (landing โฆษณาหลัก) + การ์ดผลลัพธ์ v2
   ใช้ร่วมกับหน้า Today ของสมาชิก (partials/daily/result-card)
   สเปค: REDESIGN-NOTES §2 · ไม่มีกล่องซ้อน ไม่มีเงา ไม่มีอีโมจิ
   ═══════════════════════════════════════════════════════════ */

/* ─── Landing layout ───────────────────────────────────────── */
.dsl { padding-block: var(--lt-s-8) var(--lt-section); }
.dsl__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    grid-template-areas: "intro side" "steps side" "result side" "more side";
    column-gap: var(--lt-s-9);
    row-gap: 0;
    align-items: start;
}
.dsl__intro  { grid-area: intro; }
.dsl__steps  { grid-area: steps; }
.dsl__result { grid-area: result; }
.dsl__more   { grid-area: more; }
.dsl__side   { grid-area: side; position: sticky; top: calc(var(--lt-header-h) + 24px); display: flex; flex-direction: column; gap: 20px; }

.dsl__kicker { font-size: var(--lt-fs-small); color: var(--lt-ink-3); display: flex; align-items: center; gap: 10px; }
.dsl__kicker::after { content: ''; width: 16px; height: 1px; background: var(--lt-line-strong); order: 1; }
.dsl__kicker span { order: 2; font-family: 'Songti TC', 'Noto Serif TC', 'Noto Serif CJK TC', serif; }
.dsl__title { margin: 20px 0 0; font-size: 58px; line-height: 1.22; font-weight: var(--lt-fw-light); letter-spacing: var(--lt-ls-tight); }
.dsl__lead { margin: 28px 0 0; font-size: var(--lt-fs-body-lg); line-height: var(--lt-lh-body); color: var(--lt-ink-2); max-width: 28em; }

.dsl__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
.dsl__step { border-top: var(--lt-rule-ink); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.dsl__step .lt-num { font-size: 20px; }
.dsl__step span:last-child { font-size: 16px; line-height: 1.6; font-weight: var(--lt-fw-light); color: var(--lt-ink); }

.dsl__result { margin-top: 96px; }
.dsl__result-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: 24px; flex-wrap: wrap; }
.dsl__result-head h2 { margin: 0; font-size: var(--lt-fs-h2); line-height: var(--lt-lh-h2); font-weight: var(--lt-fw-regular); }
.dsl__result-meta { font-size: var(--lt-fs-small); color: var(--lt-ink-3); }
.dsl__sample-more { display: none; } /* ปุ่มกางการ์ดตัวอย่าง — มือถือเท่านั้น */
.dsl__after { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.dsl__after .btn--text { padding: 8px 0; }

.dsl__more { margin-top: 40px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; font-size: 16px; }
.dsl__more span { color: var(--lt-ink-2); }

.dsl__panel h2 { margin: 0 0 28px; font-size: 24px; line-height: 1.45; font-weight: var(--lt-fw-regular); text-wrap: balance; }
.dsl__form { display: flex; flex-direction: column; gap: 20px; }
.dsl__form .btn--primary { height: 52px; font-size: 16px; }
.dsl__notes { display: flex; flex-direction: column; gap: 6px; font-size: var(--lt-fs-small); color: var(--lt-ink-2); }
.dsl__notes span { display: flex; align-items: center; gap: 10px; }
.dsl__notes span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--lt-sage-300); flex: none; }
.dsl__side-meta { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; font-size: 13px; color: var(--lt-ink-3); }
.dsl__dots { display: flex; gap: 6px; }
.dsl__dots span { width: 8px; height: 8px; border-radius: 50%; }

@media (max-width: 1024px) {
    .dsl__grid { grid-template-columns: minmax(0, 1fr) 380px; column-gap: var(--lt-s-7); }
    .dsl__title { font-size: 48px; }
}
@media (max-width: 860px) {
    .dsl { padding-block: var(--lt-s-6) var(--lt-s-8); }
    .dsl__grid { grid-template-columns: 1fr; grid-template-areas: "intro" "side" "steps" "result" "more"; }
    .dsl__side { position: static; margin-top: 24px; }
    .dsl__title { font-size: var(--lt-fs-h1); margin-top: 12px; }
    .dsl__lead { margin-top: 12px; font-size: var(--lt-fs-body); }
    .dsl__steps { grid-template-columns: 1fr; gap: 0; margin-top: 56px; }
    .dsl__step { flex-direction: row; align-items: baseline; gap: 16px; padding: 14px 0; border-top: var(--lt-rule); }
    .dsl__step:first-child { border-top: var(--lt-rule-ink); }
    .dsl__step:last-child { border-bottom: var(--lt-rule); }
    .dsl__step .lt-num { font-size: 18px; width: 24px; flex: none; }
    .dsl__result { margin-top: 56px; }
    /* การ์ดตัวอย่าง (ก่อนกรอก) ย่อเหลือ ~1 จอ + ไล่เฟดขาวด้านล่าง · .is-open = กางเต็ม */
    .dsl__result--sample:not(.is-open) .dsc { max-height: 620px; overflow: hidden; position: relative; }
    .dsl__result--sample:not(.is-open) .dsc::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 85%); pointer-events: none; }
    .dsl__sample-more { display: block; margin-top: 16px; }
    .dsl__result--sample.is-open .dsl__sample-more { display: none; }
    .dsl__panel h2 { font-size: 19px; margin-bottom: 20px; }
}

/* ─── Result card ──────────────────────────────────────────── */
.dsc { background: var(--lt-white); border: var(--lt-rule); border-radius: var(--lt-r-2); overflow: hidden; color: var(--lt-ink); }
.dsc__tabs { display: flex; border-bottom: var(--lt-rule); }
.dsc__tab { all: unset; cursor: pointer; flex: 1; height: 52px; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--lt-font); font-size: 15px; font-weight: var(--lt-fw-regular); color: var(--lt-ink-3); position: relative; text-decoration: none; }
.dsc__tab:hover { color: var(--lt-ink); }
.dsc__tab:disabled { cursor: default; }
.dsc__tab.is-active { color: var(--lt-ink); font-weight: var(--lt-fw-medium); }
.dsc__tab.is-active::after { content: ''; position: absolute; left: 24%; right: 24%; bottom: -1px; height: 1px; background: var(--lt-ink); }
.dsc__tab svg { flex: none; }

.dsc__lock { padding: 56px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.dsc__lock[hidden] { display: none; }
.dsc__lock-date { font-size: 15px; color: var(--lt-ink-3); }
.dsc__lock-title { margin: 0; font-size: 22px; font-weight: var(--lt-fw-regular); line-height: 1.45; max-width: 18em; }
.dsc__lock-text { margin: 0; font-size: 15px; line-height: 1.7; color: var(--lt-ink-2); max-width: 26em; }
.dsc__lock-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

.dsc__body[hidden] { display: none; }
.dsc__row { padding: 24px 28px; border-bottom: var(--lt-rule); display: flex; flex-direction: column; gap: 14px; }
.dsc__row:last-of-type { border-bottom: 0; }
.dsc__head { padding-top: 28px; }
.dsc__date { font-size: var(--lt-fs-small); color: var(--lt-ink-3); }
.dsc__stem-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dsc__stem { font-family: 'Songti TC', 'Noto Serif TC', 'Noto Serif CJK TC', 'PingFang TC', serif; font-size: 52px; line-height: 1; letter-spacing: .04em; color: var(--lt-ink); }
.dsc__stem-th { font-size: 14px; color: var(--lt-ink-3); }
.dsc__relation { margin: 0; font-size: var(--lt-fs-body); line-height: 1.6; font-weight: var(--lt-fw-regular); color: var(--lt-ink); }
.dsc__story { margin: 0; font-size: 16px; line-height: 1.75; color: var(--lt-ink-2); }
.dsc__story + .dsc__story { margin-top: -6px; }
.dsc__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.dsc__animal { margin: 0; font-size: 15px; line-height: 1.7; color: var(--lt-ink-2); }
.dsc__animal span { color: var(--lt-ink); font-weight: var(--lt-fw-regular); }
.dsc__label { font-size: var(--lt-fs-small); color: var(--lt-ink-3); }
.dsc__stars { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; align-items: baseline; }
.dsc__star-zh { font-family: 'Songti TC', 'Noto Serif TC', serif; font-size: 18px; color: var(--lt-ink); white-space: nowrap; }
.dsc__star-text { font-size: 15px; line-height: 1.6; color: var(--lt-ink-2); }
.dsc__star-text span { color: var(--lt-ink); font-weight: var(--lt-fw-regular); }
.dsc__colors { flex-direction: row; flex-wrap: wrap; gap: 32px 48px; }
.dsc__colors > div { display: flex; flex-direction: column; gap: 12px; }
.dsc__swatches { display: flex; gap: 14px; flex-wrap: wrap; }
.dsc__swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--lt-ink-2); }
.dsc__swatch-dot { width: 28px; height: 28px; border-radius: 50%; border: var(--lt-rule); box-sizing: border-box; }
.dsc__swatches--avoid .dsc__swatch { color: var(--lt-ink-3); }
.dsc__swatches--avoid .dsc__swatch-dot { opacity: .45; }
.dsc__advice { margin: 0; font-size: 16px; line-height: 1.75; color: var(--lt-ink); }
.dsc__tip { margin: 0; font-size: 14px; line-height: 1.7; color: var(--lt-ink-3); }
.dsc__stones { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.dsc__stone { display: flex; gap: 16px; }
.dsc__stone-img { width: 96px; height: 120px; object-fit: cover; display: block; flex: none; background: var(--lt-wash); }
.dsc__stone-img--empty { display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; font-size: 14px; color: var(--lt-ink-2); line-height: 1.3; }
.dsc__stone-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dsc__stone-kicker { font-size: 13px; color: var(--lt-sage-700); }
.dsc__stone-name { font-size: 18px; font-weight: var(--lt-fw-medium); line-height: 1.35; color: var(--lt-ink); }
.dsc__stone-latin { font-size: 15px; color: var(--lt-ink-3); }
.dsc__stone-desc { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: var(--lt-ink-2); }
.dsc__stone-desc + .dsc__stone-desc { margin-top: 0; }
.dsc__tip--wide { grid-column: 1 / -1; }
.dsc__foot { padding: 20px 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: var(--lt-rule); }
.dsc__share { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-family: var(--lt-font); font-size: 15px; color: var(--lt-ink); }
.dsc__share:hover { color: var(--lt-sage-700); }

@media (max-width: 560px) {
    .dsc__row, .dsc__foot { padding-left: 20px; padding-right: 20px; }
    /* รูปหินเล็กลง ให้คอลัมน์ข้อความกว้างขึ้น (จอแคบ ข้อความไม่ยืดสูง) */
    .dsc__stone { gap: 14px; }
    .dsc__stone-img { width: 72px; height: 90px; }
    .dsc__stone-img--empty { font-size: 12px; padding: 6px; }
    .dsc__stone-name { font-size: 17px; }
    .dsc__stones { gap: 20px; }
    .dsc__stem { font-size: 44px; }
    .dsc__colors { gap: 24px; }
    .dsc__lock { padding: 40px 20px; }
}

/* ─── Story card 9:16 (screenshot mode) — ของเดิม ไม่แตะหน้าตา ─── */
.ds-ss { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(30,25,18,.92); overflow: auto; padding: 16px 0; }
.ds-ss.open { display: flex; flex-direction: column; align-items: center; }
.ds-ss-hint { color: #fff; font-size: .9rem; margin: 6px 0 12px; text-align: center; }
.ds-ss-close { color: #d3c8b8; background: none; border: 1px solid #6b6257; border-radius: 20px; padding: 6px 20px; margin-top: 14px; cursor: pointer; font-family: inherit; }
.ds-story { width: min(86vw, 46vh); aspect-ratio: 9/16; background: linear-gradient(170deg, #fffdf8 0%, #f4ead9 100%); border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; }
.ds-story-head { padding: 14px 18px 0; display: flex; justify-content: space-between; font-size: .72rem; color: #a89d8e; }
.ds-story-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 20px; }
.ds-story-main .em { font-size: 3rem; }
.ds-story-main .el { font-size: 1.25rem; font-weight: 700; color: #45403a; margin: 6px 0 2px; }
.ds-story-main .st { font-size: 1rem; color: #3d7a55; font-weight: 600; margin-top: 12px; }
.ds-story-main .sten { font-size: .78rem; color: #a89d8e; }
.ds-story-main .qt { font-size: .82rem; color: #8a6d3b; font-style: italic; margin-top: 14px; line-height: 1.7; }
.ds-story-main .ds-chips { justify-content: center; }
.ds-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ds-chip { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; padding: 5px 12px; border-radius: 16px; background: #faf6f0; border: 1px solid #eee4d8; }
.ds-chip .dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }
.ds-story-foot { background: #3d7a55; color: #fff; padding: 10px 18px; display: flex; justify-content: space-between; font-size: .72rem; }