/* 개냥이 전용 화면 스타일 (style.css 다음에 불러옴) */
/* 검색엔진용으로 미리 넣어 둔 글 (앱이 뜨기 전 잠깐 보임) */
.prerender h1 { font-family: var(--f-title); font-weight: 400; font-size: 32px; margin: 4px 0; }
.prerender h2 { font-family: var(--f-title); font-weight: 400; font-size: 18px; margin: 14px 0 4px; }
.prerender p, .prerender li { font-size: 14px; line-height: 1.7; }
.prerender a { text-decoration: underline; }
.logo-hero { margin: 0 auto; width: 300px; height: 216px; overflow: hidden; font-size: 0; }
.logo-hero img { display: block; width: 300px; height: 300px; max-width: none; margin-top: -58px; }

/* 앱 설치 카드 */
.install { margin: 14px 16px 0; padding: 10px 12px; background: var(--mustard); color: var(--ink); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.install img { width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0; }
.install-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.install-text b { font-family: var(--f-title); font-weight: 400; font-size: 18px; }
.install-text span { font-size: 12px; line-height: 1.4; }
.install-btn { height: 40px; padding: 0 16px; background: var(--ink); color: var(--mustard); border: 0; font-family: var(--f-title); font-size: 16px; cursor: pointer; flex-shrink: 0; }
.install-help { flex-basis: 100%; margin: 2px 0 0; padding: 8px 10px; background: #fff8; font-size: 13px; line-height: 1.6; }

.btn-ghost { background: transparent; color: var(--chalk); border: 1.5px dashed #F4F1EA99; height: 46px; font-size: 15px; }
.icon-btn[aria-pressed="true"] { color: var(--mustard); border-color: var(--mustard); border-style: solid; }

/* 오늘의 품종 */
.today { margin: 20px 16px 0; border: 1.5px solid var(--chalk); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.today-head { display: flex; justify-content: space-between; align-items: center; }
.today-photo { background: #000; height: 220px; display: flex; align-items: center; justify-content: center; }
.today-photo img { max-width: 100%; max-height: 220px; object-fit: contain; display: block; }
.today-body { display: flex; flex-direction: column; gap: 2px; }
.today:hover .row-name { text-decoration: underline; text-decoration-color: var(--mustard); text-underline-offset: 4px; }

.fav-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.fav-strip a { width: 84px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; font-family: var(--f-title); font-size: 13px; text-align: center; }
.fav-thumb { width: 84px; height: 84px; background: #000; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--mustard); }
.fav-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.about-link { display: block; margin: 22px 16px 0; text-align: center; font-size: 13px; color: var(--chalk-dim); text-decoration: underline; text-underline-offset: 3px; }

/* 목록 */
.list-head { margin: 0 16px; background: var(--mustard); color: var(--ink); padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; }
.list-title { display: flex; flex-direction: column; }
.list-art svg { width: 76px; height: auto; display: block; }
.kind-switch { margin: 12px 16px 0; display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--chalk); }
.kind-switch a { height: 42px; display: flex; align-items: center; justify-content: center; font-family: var(--f-title); font-size: 16px; color: var(--chalk-dim); }
.kind-switch a[aria-selected="true"] { background: var(--chalk); color: var(--ink); }
.chips.dark .chip { border-color: #F4F1EA88; color: var(--chalk); }
.chips.dark .chip[aria-pressed="true"] { background: var(--mustard); border-color: var(--mustard); color: var(--ink); }

.b-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.b-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.b-card { background: var(--paper); color: var(--ink); display: flex; flex-direction: column; min-width: 0; }
.thumb { height: 130px; background: var(--board-deep); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.thumb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.b-grid.three .thumb { height: 92px; }
.no-photo svg { width: 64px; height: auto; }
.b-card-text { padding: 7px 9px 9px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.b-card-name { font-family: var(--f-title); font-size: 17px; line-height: 1.2; overflow-wrap: anywhere; }
.b-grid.three .b-card-name { font-size: 14px; }
.b-card-en { font-family: var(--f-script); font-size: 13px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-card-extra { font-size: 11px; color: var(--ink-dim); margin-top: 2px; }
.b-card:hover .b-card-name { text-decoration: underline; text-decoration-color: var(--mustard); text-decoration-thickness: 3px; text-underline-offset: 3px; }

/* 상세 */
.photo-full { margin: 10px -2px 0; background: #000; display: flex; align-items: center; justify-content: center; }
.photo-full img { display: block; width: auto; height: auto; max-width: 100%; max-height: 440px; object-fit: contain; }
.photo-full.empty-photo { flex-direction: column; gap: 6px; padding: 30px 0; color: var(--chalk-dim); }
.spec-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.spec-grid div { padding: 7px 4px; display: flex; flex-direction: column; align-items: center; text-align: center; border-left: 1.5px dashed var(--ink); }
.spec-grid div:nth-child(3n+1) { border-left: 0; }
.spec-grid div:nth-child(n+4) { border-top: 1.5px dashed var(--ink); }
.spec-grid span { font-family: var(--f-label); font-size: 11px; letter-spacing: 1px; color: var(--ink-dim); }
.spec-grid b { font-family: var(--f-title); font-weight: 400; font-size: 14px; overflow-wrap: anywhere; }
.sec { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.sec > .tag-bar { align-self: flex-start; font-size: 14px; }
.body-text { margin: 0; font-size: 14px; line-height: 1.75; }
.scores { display: flex; flex-direction: column; gap: 6px; }
.score { display: grid; grid-template-columns: 82px 1fr 64px; align-items: center; gap: 8px; }
.score-k { font-family: var(--f-title); font-size: 14px; }
.score-dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.score-dots i { height: 14px; border: 1.5px solid var(--ink); }
.score-dots i.on { background: var(--ink); }
.score-w { font-size: 12px; color: var(--ink-dim); text-align: right; }
.tips { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.6; }
.tips li::marker { font-family: var(--f-label); font-weight: 700; }
.health { display: flex; flex-wrap: wrap; gap: 6px; }
.health span { border: 1.5px solid var(--warn); color: var(--warn); background: #FFF4F2; font-size: 13px; font-weight: 700; padding: 4px 9px; }

.health a { border: 1.5px solid var(--warn); color: var(--warn); background: #FFF4F2; font-size: 13px; font-weight: 700; padding: 4px 9px; display: inline-flex; align-items: center; gap: 4px; }
.health a i { font-style: normal; font-size: 16px; line-height: 1; }
.health a:hover, .health a:focus-visible { background: var(--warn); color: #fff; }
.health span.ok { border-color: #2E7D4F; color: #2E7D4F; background: #EEF8F1; }

/* 아래 메뉴 5칸 */
.nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nav a { font-size: 14px; }

/* 질병 사전 */
.dis-group { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.dis-group > .tag-bar { align-self: flex-start; font-size: 13px; }
.dis-aka { margin: 4px 0 0; font-size: 12px; color: var(--ink-dim); line-height: 1.5; }
.dis-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.6; }
.dis-list.warn li::marker { color: var(--warn); }
.vet-note { margin: 16px 0 0; padding: 9px 12px; border: 1.5px dashed var(--ink); font-size: 12.5px; line-height: 1.6; color: var(--ink-dim); }
.dis-breeds { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.dis-breed { width: 78px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; font-family: var(--f-title); font-size: 12.5px; text-align: center; line-height: 1.25; }
.dis-breed-photo { width: 78px; height: 78px; background: #000; display: flex; align-items: center; justify-content: center; border: 1.5px solid #F4F1EA55; }
.dis-breed-photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dis-breed:hover .dis-breed-photo { border-color: var(--mustard); }

/* 나이별 돌보기 */
.kind-switch.on-paper { margin: 12px 0 0; border-color: var(--ink); }
.kind-switch.on-paper a { color: var(--ink-dim); }
.kind-switch.on-paper a[aria-selected="true"] { background: var(--ink); color: var(--mustard); }
.age-jump { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.age-jump a { border: 1.5px solid var(--ink); padding: 6px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--f-title); font-size: 12.5px; text-align: center; line-height: 1.2; }
.age-jump a b { width: 22px; height: 22px; border-radius: 11px; background: var(--mustard); display: flex; align-items: center; justify-content: center; font-family: var(--f-label); font-size: 13px; }
.age-jump a:hover { background: var(--mustard); }
.age-card { margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--ink); display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 10px; }
.age-head { display: flex; align-items: center; gap: 10px; }
.age-num { width: 44px; height: 44px; border-radius: 22px; background: var(--ink); color: var(--mustard); display: flex; align-items: center; justify-content: center; font-family: var(--f-label); font-weight: 700; font-size: 22px; flex-shrink: 0; }
.age-name { font-family: var(--f-title); font-size: 24px; line-height: 1.1; }
.age-range { font-size: 13px; color: var(--ink-dim); }
.age-food { display: flex; gap: 8px; align-items: flex-start; background: #F2B63033; padding: 8px 10px; font-size: 13.5px; line-height: 1.6; }
.age-food b { background: var(--ink); color: var(--mustard); font-size: 12px; padding: 1px 7px; flex-shrink: 0; margin-top: 2px; }
.age-sub { margin: 4px 0 0; font-family: var(--f-title); font-weight: 400; font-size: 16px; }
.age-sub.warn { color: var(--warn); }

/* 우리 아이 수첩 */
.me-card { margin: 12px 16px 0; padding: 10px 12px; border: 2px solid var(--mustard); display: flex; align-items: center; gap: 10px; color: var(--chalk); }
.me-card-icon svg { width: 52px; height: auto; display: block; }
.me-card-icon { background: var(--mustard); padding: 4px; flex-shrink: 0; }
.me-card-photo { width: 56px; height: 56px; background: #000; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.me-card-photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.me-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.me-card-text b { font-family: var(--f-title); font-weight: 400; font-size: 18px; color: var(--mustard); }
.me-card-text span { font-size: 12.5px; color: var(--chalk-dim); line-height: 1.45; }
.me-go { font-family: var(--f-title); font-size: 15px; color: var(--mustard); flex-shrink: 0; }
.me-card:hover { background: #F2B6301A; }
.me-cta { margin: 16px 14px 0; padding: 12px 14px; border: 2px dashed var(--mustard); display: flex; flex-direction: column; gap: 3px; color: var(--chalk); }
.me-cta b { font-family: var(--f-title); font-weight: 400; font-size: 18px; color: var(--mustard); }
.me-cta span { font-size: 13px; color: var(--chalk-dim); }
.me-head-box { background: var(--ink); padding: 8px 12px; display: flex; flex-direction: column; }
.me-h1 { margin: 0; font-family: var(--f-title); font-weight: 400; font-size: 28px; color: var(--mustard); line-height: 1.15; overflow-wrap: anywhere; }
.me-hero { background: var(--ink); color: var(--chalk); display: flex; gap: 12px; align-items: center; padding: 10px; margin: 0 -2px; }
.me-photo { width: 96px; height: 96px; flex-shrink: 0; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.me-photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.me-hero-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.me-sub { font-size: 13px; color: var(--chalk-dim); }
.stage-badge { align-self: flex-start; background: var(--mustard); color: var(--ink); font-family: var(--f-title); font-size: 13px; padding: 2px 8px; margin-top: 2px; }
.me-tools { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 13px; }
.me-tools a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--mustard); text-decoration-thickness: 2px; }
.me-warn { margin: 10px 0 0; padding: 8px 10px; background: #F2B63033; font-size: 13px; }
.more-link { align-self: flex-start; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pet-tabs { margin: 0 16px 10px; display: flex; gap: 6px; overflow-x: auto; }
.pet-tabs button, .pet-tabs a { flex-shrink: 0; height: 36px; padding: 0 14px; border: 1.5px solid #F4F1EA88; background: transparent; color: var(--chalk); font-family: var(--f-title); font-size: 14px; display: inline-flex; align-items: center; cursor: pointer; }
.pet-tabs button[aria-selected="true"] { background: var(--mustard); border-color: var(--mustard); color: var(--ink); }
.care-list { display: flex; flex-direction: column; gap: 8px; }
.care { border: 1.5px solid var(--ink); padding: 9px 10px; display: flex; flex-direction: column; gap: 8px; background: #fff6; }
.care.late { border-color: var(--warn); background: #FFF4F2; }
.care.today, .care.soon { border-color: #B07D10; background: #F2B63026; }
.care-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.care-main b { font-family: var(--f-title); font-weight: 400; font-size: 16px; }
.care-every { font-size: 11px; color: var(--ink-dim); border: 1px solid #1C1C1A44; padding: 0 5px; }
.care-status { margin-left: auto; font-size: 12.5px; font-weight: 700; }
.care.late .care-status, .care-status.late { color: var(--warn); }
.care.soon .care-status, .care.today .care-status, .care-status.soon { color: #8A5E00; }
.care-status.none, .care.none .care-status { color: var(--ink-dim); font-weight: 500; }
.care-last { flex-basis: 100%; font-size: 12px; color: var(--ink-dim); }
.care-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.care-done { height: 34px; padding: 0 12px; background: var(--ink); color: var(--mustard); border: 0; font-family: var(--f-title); font-size: 14px; cursor: pointer; }
.care-date { position: relative; height: 34px; padding: 0 10px; border: 1.5px solid var(--ink); font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; cursor: pointer; overflow: hidden; }
.care-date input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.cal { position: relative; }
.cal summary { list-style: none; height: 34px; padding: 0 10px; border: 1.5px dashed var(--ink); font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; cursor: pointer; }
.cal summary::-webkit-details-marker { display: none; }
.cal summary::before { content: '🔔 '; }
.cal-menu { position: absolute; z-index: 5; right: 0; top: 38px; background: var(--paper); border: 2px solid var(--ink); display: flex; flex-direction: column; min-width: 170px; box-shadow: 0 6px 18px #0004; }
.cal-menu button, .cal-menu a { padding: 10px 12px; background: transparent; border: 0; text-align: left; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink); cursor: pointer; }
.cal-menu button { border-bottom: 1px dashed #1C1C1A55; }
.cal-menu button:hover, .cal-menu a:hover { background: var(--mustard); }
.w-chart { width: 100%; height: auto; display: block; background: #fff8; border: 1.5px solid #1C1C1A33; }
.w-note { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-dim); line-height: 1.5; }
.inline-form { display: flex; gap: 6px; flex-wrap: wrap; }
.inline-form input, .stock input, .pet-form input, .pet-form select { height: 42px; border: 2px solid var(--ink); background: #fff; padding: 0 10px; font: inherit; font-size: 15px; color: var(--ink); min-width: 0; border-radius: 0; }
.inline-form input[type="number"] { flex: 1 1 110px; }
.inline-form input[type="date"] { flex: 1 1 130px; }
.inline-form .btn { height: 42px; padding: 0 16px; }
.text-btn { align-self: flex-start; background: none; border: 0; padding: 4px 0; font: inherit; font-size: 12.5px; color: var(--ink-dim); text-decoration: underline; cursor: pointer; }
.text-btn.danger { color: var(--warn); margin-top: 8px; }
.stock { border: 1.5px solid var(--ink); padding: 10px; display: flex; flex-direction: column; gap: 8px; background: #fff6; }
.stock-head { display: flex; align-items: baseline; gap: 8px; }
.stock-head b { font-family: var(--f-title); font-weight: 400; font-size: 17px; }
.stock-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.stock-fields label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 700; color: var(--ink-dim); }
.stock-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.stock-act .btn { height: 34px; font-size: 14px; padding: 0 14px; }
.buy { font-size: 13px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--mustard); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.backup { display: flex; gap: 8px; flex-wrap: wrap; }
.backup .btn { height: 40px; font-size: 14px; flex: 1; }
.pet-form { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.pet-form > label { display: flex; flex-direction: column; gap: 4px; font-family: var(--f-title); font-size: 15px; }
.form-hint { margin: -6px 0 0; font-size: 12px; color: var(--ink-dim); }
.form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--ink-dim); }
.form-row label { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--ink); }
.form-row input { width: 70px; height: 38px; border: 2px solid var(--ink); padding: 0 8px; font: inherit; }

/* 찾기 퀴즈 */
.quiz { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.quiz fieldset { border: 0; margin: 0; padding: 0 0 12px; border-bottom: 1.5px dashed #1C1C1A55; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.quiz fieldset[hidden] { display: none; }
.quiz legend { display: flex; align-items: center; gap: 8px; font-family: var(--f-title); font-size: 17px; padding: 0; margin-bottom: 8px; }
.chip-radio { position: relative; cursor: pointer; }
.chip-radio input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip-radio span { min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; border: 2px solid var(--ink); font-size: 14px; font-weight: 700; }
.chip-radio input:checked + span { background: var(--ink); color: var(--mustard); }
.chip-radio input:focus-visible + span { outline: 2px solid var(--mustard); outline-offset: 2px; }

.result-top { margin: 0 16px; background: var(--mustard); color: var(--ink); padding: 12px 14px 14px; position: relative; }
.result-first { position: relative; display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.result-photo { height: 230px; background: var(--ink); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.result-photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.whys { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; }
.why { font-size: 12.5px; font-weight: 700; }
.why.good { color: var(--mustard); }
.why.warn { color: #E8846F; }
.result-top .why.good { color: var(--ink); }
.result-top .why.warn { color: var(--warn); }
.result-row { display: flex; gap: 10px; align-items: center; border: 1.5px dashed #F4F1EA77; padding: 8px; }
.rr-thumb { width: 74px; height: 74px; flex-shrink: 0; background: #000; display: flex; align-items: center; justify-content: center; }
.rr-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.result-row:hover { border-style: solid; }

/* 준비물 */
.set-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.set-grid a { border: 2px solid var(--ink); padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.set-grid a svg { width: 60px; height: auto; }
.set-grid b { font-family: var(--f-title); font-weight: 400; font-size: 18px; }
.set-grid .pen { font-size: 16px; color: var(--ink-dim); }
.set-grid a:hover { background: var(--mustard); }
.kit-item .kit-thumb { width: 76px; height: 76px; object-fit: contain; background: #fff; display: block; }
.kit-thumb-link { flex-shrink: 0; display: block; position: relative; }
.kit-thumb-link:hover .kit-thumb, .kit-thumb-link:focus-visible .kit-thumb { outline: 3px solid var(--mustard); outline-offset: 1px; }
.kit-thumb-link::after { content: '↗'; position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; background: var(--ink); color: var(--mustard); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.kit-name { color: var(--ink) !important; }
.kit-name-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--mustard); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.kit-name-link i { font-style: normal; font-weight: 700; color: #B07D10; }
.kit-name-link:hover { background: #F2B63033; }
.kit-soon { align-self: flex-start; margin-top: 3px; font-size: 11px; color: var(--ink-dim); border: 1px dashed #1C1C1A66; padding: 1px 6px; }
.kit-tag { align-self: flex-start; margin-top: 3px; font-size: 11px; font-weight: 700; background: var(--mustard); padding: 1px 6px; }
.kit-total { margin: 10px -2px 0; background: var(--mustard); padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; font-family: var(--f-label); font-weight: 700; }
.kit-total b { font-size: 18px; }
.kit-hero { background: var(--ink); color: var(--chalk); display: flex; gap: 12px; align-items: center; padding: 8px; margin: 0 -2px; }
.kit-hero-photo { width: 92px; height: 92px; flex-shrink: 0; background: #000; display: flex; align-items: center; justify-content: center; }
.kit-hero-photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.kit-hero-name { margin: 0; font-weight: 400; font-family: var(--f-title); font-size: 26px; color: var(--mustard); line-height: 1.15; overflow-wrap: anywhere; }

.credits { margin: 0; padding-left: 18px; font-size: 11.5px; line-height: 1.6; color: var(--ink-dim); overflow-wrap: anywhere; }
.credits b { color: var(--ink); }
.credits a { text-decoration: underline; text-underline-offset: 2px; }