.pet-intro { width: min(560px, 100%); max-width: 100%; height: min(880px, calc(100dvh - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid #eadbd1; border-radius: 26px; background: #fffaf5; color: #44312a; box-shadow: 0 24px 80px #22181133; font-family: inherit; }
.pet-intro[open] { display: flex; flex-direction: column; }
.pet-intro::backdrop { background: #30251f80; backdrop-filter: blur(8px); }
.pet-intro * { box-sizing: border-box; }
.pet-intro button { font: inherit; cursor: pointer; }
.pet-intro button:focus-visible, .pet-intro summary:focus-visible { outline: 3px solid #cb7462; outline-offset: 3px; }
.pet-intro__header { display: flex; justify-content: space-between; align-items: center; flex: 0 0 auto; padding: 14px 22px; border-bottom: 1px solid #efe3d9; font-size: 13px; color: #846f62; }
.pet-intro__header button { width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: #44312a; font-size: 26px; }
.pet-intro__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 26px 24px 20px; }
.pet-intro__hero { text-align: center; }
.pet-intro h1 { margin: 0 0 12px; font-size: clamp(25px, 6vw, 34px); line-height: 1.45; letter-spacing: -.03em; }
.pet-intro p { font-size: 13px; line-height: 1.8; color: #806d62; }
.pet-intro figure { margin: 0; }
.pet-intro img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 16px; }
.pet-intro__hero figure { position: relative; margin-top: 22px; }
.pet-intro__hero figcaption { position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: 7px; color: white; background: #4933248c; font-size: 10px; }
.pet-intro__times { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; margin-top: 10px; color: #846f62; font-size: 11px; line-height: 1.5; }
.pet-intro__watch { margin-top: 16px; padding: 9px 16px; border: 1px solid #dfc6b5; border-radius: 20px; background: #fff7ee; color: #80533f; font-size: 13px; }
.pet-intro__section { margin-top: 34px; padding-top: 26px; border-top: 1px solid #eadbd1; }
.pet-intro h2 { margin: 0 0 18px; font-size: 21px; line-height: 1.5; }
.pet-intro__transformation { display: grid; grid-template-columns: 1fr 28px 1fr; align-items: center; gap: 14px; }
.pet-intro__transformation img { width: auto; max-width: 100%; max-height: 210px; margin: auto; background: #f8eee6; }
.pet-intro__transformation>span { color: #cb7462; font-size: 24px; text-align: center; }
.pet-intro__section figcaption { margin-top: 8px; text-align: center; font-size: 11px; color: #846f62; }
.pet-intro__together { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; }
.pet-intro__together figure img { width: auto; max-width: 100%; max-height: 210px; margin: auto; }
.pet-intro__chat { display: grid; gap: 14px; font-size: 13px; }
.pet-intro__bubble { padding: 10px 12px; background: #f4e7db; border-radius: 13px 13px 13px 3px; line-height: 1.6; }
.pet-intro__bubble--user { margin-left: 15px; background: #e5eedf; border-radius: 13px 13px 3px 13px; }
.pet-intro__chat small { color: #846f62; text-align: center; font-size: 10px; }
.pet-intro__details { margin: 22px 0 8px; font-size: 12px; color: #846f62; }
.pet-intro__details summary { cursor: pointer; }
.pet-intro__footer { flex: 0 0 auto; padding: 14px 22px max(16px, env(safe-area-inset-bottom)); background: #fffaf5; border-top: 1px solid #eadbd1; }
.pet-intro__footer>div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.pet-intro__footer>div span { font-size: 13px; }
.pet-intro__footer strong { max-width: 70%; color: #cb7462; font-size: 26px; overflow-wrap: anywhere; }
.pet-intro__footer button { width: 100%; min-height: 46px; padding: 10px; background: #cb7462; color: white; border: 0; border-radius: 14px; font-size: 15px; font-weight: 650; }
.pet-intro__footer button:disabled { opacity: .6; cursor: wait; }
.pet-intro__footer small { display: block; margin-top: 9px; color: #846f62; text-align: center; line-height: 1.5; font-size: 10px; }
.pet-intro__footer [role=status]:empty { display: none; }
@media(max-width:600px) { .pet-intro { height: 100dvh; max-height: 100dvh; width: 100%; border: 0; border-radius: 0; } .pet-intro__body { padding: 20px 18px; } .pet-intro__header { padding: max(10px,env(safe-area-inset-top)) 18px 10px; } .pet-intro__footer { padding-inline: 18px; } }
@media(max-height:460px) { .pet-intro__header { padding-block: 5px; } .pet-intro__footer { padding-block: 8px; } .pet-intro__footer small { display: none; } }