/*
* 엑셀로 한 번에 등록(import.html) — 데스크톱·모바일 공용 한 장(반응형). 색 = 토큰만(하드코딩 색 없음, 다크 대응).
* 구성 B(큰 라운드 면·부드러운 그림자). 40대+ 원칙: 본문 16~17px, 보조 14px↑, 누르는 곳 48px↑(주 행동 56px), 글자 라벨.
* 미리보기·결과: 넓은 화면 = 표(.im-tbl), 768px 이하 = 줄별 카드(.im-cards).
*/
body.im-page{min-height:100vh;}
/* (v2.35.3 긴급 — 사용자 2026-11-04 "30마리 등록하는데 네비게이션이 스크롤따라 움직이더라") 위 줄(‹ 개체 목록으로 · 매장)이 내용과 함께
위로 올라가 사라지던 것 → 다른 화면의 위 메뉴 줄(shell-desktop.css .side)처럼 제자리에 붙는다(sticky). 바탕은 창 끝까지(바탕색 — 밑 내용이 비치지 않게),
단추·글은 본문(.im-main)과 같은 세로선(넓은 창 = 가운데 page-max 안). 굴리면 아래 가는 선(.stuck — js/import.js). 굴려 맞추는 곳(사진 붙이기 등)은
머리 높이만큼 아래로(scroll-padding). 낮은 창(높이 500 미만)은 붙이지 않음(§7-2 세로가 낮을 때 — 맨 아래 규칙). */
html{--im-top-h:80px;scroll-padding-top:var(--im-top-h);}
.im-top{position:sticky;top:0;z-index:40;min-height:var(--im-top-h);display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
padding:var(--s3) max(var(--s8),calc((100% - var(--page-max)) / 2 + var(--s8)));background:var(--bg);
transition:box-shadow var(--dur-2) var(--ease);}
.im-top.stuck{box-shadow:0 1px 0 var(--line-2);}
.im-sp{flex:1;}
.im-where{font-size:var(--t-md);color:var(--ink-3);min-width:0;overflow-wrap:anywhere;}
.im-where b{color:var(--ink);font-weight:var(--w-bold);margin-left:4px;}
.im-main{max-width:var(--page-max);margin:0 auto;padding:0 var(--s8) calc(140px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:var(--s5);}
.im-head{margin:var(--s2) 0 var(--s2);}
/* ---- 막힘(보기 전용 등) ---- */
.im-gate-card{background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--sh-1);padding:var(--s10) var(--s6);text-align:center;max-width:640px;margin:0 auto;}
.im-gate-t{margin:0 0 var(--s2);font-size:var(--t-xl);font-weight:var(--w-black);color:var(--ink);}
.im-gate-d{margin:0 0 var(--s6);font-size:var(--t-md);color:var(--ink-2);line-height:1.65;}
.im-gate-btns{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap;}
/* ---- 시작: 3단계 ---- */
.im-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);}
.im-step{position:relative;background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--sh-1);padding:var(--s6);display:flex;gap:var(--s4);align-items:flex-start;}
.im-num{width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
background:var(--accent-soft);color:var(--accent-text);font-size:var(--t-xl);font-weight:var(--w-black);}
.im-step-b{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);}
.im-step-t{margin:6px 0 0;font-size:var(--t-xl);font-weight:var(--w-bold);color:var(--ink);letter-spacing:-.015em;line-height:1.3;}
.im-step-d{margin:0;max-width:62ch;font-size:var(--t-md);color:var(--ink-2);line-height:1.65;} /* (v3.0 2차-R §7) 넓은 창에서 한 줄 70자↑ 늘어지지 않게 */
/* (v2.35.4) 괄호 + 조사 한 덩어리 — "(등록일)⏎로"처럼 조사만 다음 줄로 떨어지지 않게(import.html .im-nw) */
.im-nw{white-space:nowrap;}
.im-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.im-file:focus-visible + .im-pick{outline:3px solid var(--accent-ring);outline-offset:2px;}
.im-drop{transition:box-shadow var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease);}
.im-drop.over{box-shadow:0 0 0 3px var(--accent),var(--sh-2);background:var(--accent-soft);}
.im-drop-hint{margin:0;font-size:var(--t-xs);color:var(--ink-3);}
.im-read{padding:var(--s2) 0;justify-content:flex-start;}
.im-err{margin:0;padding:var(--s3) var(--s4);border-radius:var(--r-md);background:var(--dang-soft);color:var(--dang);
font-size:var(--t-md);font-weight:var(--w-semi);line-height:1.55;align-self:stretch;}
/* ---- 미리보기 ---- */
.im-filebar{display:flex;align-items:center;gap:var(--s3);background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--sh-1);padding:var(--s3) var(--s3) var(--s3) var(--s4);}
.im-file-ic{width:44px;height:44px;border-radius:14px;background:var(--fill);color:var(--accent);display:grid;place-items:center;flex:0 0 auto;}
.im-file-nm{flex:1;min-width:0;font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--ink);overflow-wrap:anywhere;}
.im-notes{display:flex;flex-direction:column;gap:var(--s3);}
.im-notes:empty{display:none;}
.im-note{margin:0;padding:var(--s3) var(--s4);border-radius:var(--r-lg);background:var(--fill);color:var(--ink-2);font-size:var(--t-md);line-height:1.6;}
.im-note b{display:block;color:var(--ink);font-weight:var(--w-bold);}
.im-note p{margin:2px 0 0;}
.im-note.warn{background:var(--warn-soft);}
.im-note.warn b{color:var(--warn);}
.im-note.info{background:var(--info-soft);}
.im-note.bad{background:var(--dang-soft);color:var(--ink);font-weight:var(--w-semi);}
.im-note.muted{background:var(--fill);}
.im-sum{margin:var(--s2) 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px var(--s3);font-size:var(--t-xl);color:var(--ink-2);}
.im-sum b{font-weight:var(--w-black);}
.im-sum-ok b{color:var(--ok);}
.im-sum-bad b{color:var(--dang);}
.im-sum-zero b{color:var(--ink);}
.im-sum-sep{color:var(--ink-4);}
.im-filter{align-self:flex-start;}
/* 표 */
.im-tblwrap{background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--sh-1);padding:var(--s2) var(--s3);overflow-x:auto;}
.im-tbl tbody tr{cursor:default;}
.im-tbl tbody tr:hover td{background:transparent;}
.im-tbl td{white-space:normal;height:auto;min-height:56px;padding:var(--s3);vertical-align:top;line-height:1.5;overflow-wrap:anywhere;}
.im-tbl td.c-name{font-weight:var(--w-bold);color:var(--ink);min-width:120px;}
/* (v2.9) 형질 칸이 더해져 14칸 — 1280 화면에서 표가 옆으로 넘치지 않게 글 칸 최소 폭을 줄임(모프·형질·태그 100 · 사진 120 · 결과 190) */
.im-tbl td.c-morphs,.im-tbl td.c-traits,.im-tbl td.c-tags{min-width:100px;}
/* (v2.33) 보이는 라벨·분양가·메모 칸(파일에 그 칸이 있을 때만) */
.im-tbl td.c-label,.im-tbl td.c-memo{min-width:100px;}
.im-tbl td.c-price{white-space:nowrap;font-variant-numeric:tabular-nums;}
.im-tbl td.c-serial{white-space:nowrap;font-variant-numeric:tabular-nums;}
.im-tbl td.c-birth,.im-tbl td.c-sex,.im-tbl td.c-status,.im-tbl td.c-rating,.im-tbl td.c-father,.im-tbl td.c-mother{white-space:nowrap;}
.im-why-list{margin:6px 0 0;padding:0 0 0 20px;font-size:var(--t-sm);color:var(--dang);font-weight:var(--w-semi);line-height:1.5;}
.im-why-list li + li{margin-top:4px;}
.im-why-list.skip{color:var(--ink-2);font-weight:var(--w-reg);}
.im-tbl td.im-line{color:var(--ink-3);white-space:nowrap;width:56px;}
.im-tbl td.im-res{min-width:190px;}
.im-tbl tr.bad td{background:var(--dang-soft);}
.im-tbl tr.bad:hover td{background:var(--dang-soft);}
.im-tbl td.is-bad{color:var(--dang);font-weight:var(--w-bold);text-decoration:underline wavy var(--dang);text-underline-offset:4px;}
.im-reg{color:var(--ink-3);}
/* 결과 표시 */
.im-v{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:3px 12px;border-radius:var(--r-full);
font-size:var(--t-sm);font-weight:var(--w-bold);line-height:1.4;background:var(--fill);color:var(--ink-2);}
.im-v::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto;}
.im-v.ok{background:var(--ok-soft);color:var(--ok);}
.im-v.bad,.im-v.fail,.im-v.undofail{background:var(--dang-soft);color:var(--dang);}
.im-v.skip{background:var(--warn-soft);color:var(--warn);}
.im-v.undone{background:var(--fill-2);color:var(--ink-2);}
.im-w{display:block;margin-top:6px;font-size:var(--t-xs);color:var(--warn);font-weight:var(--w-semi);}
/* (v2.13.1) 결과 — 일련번호 칸(등록된 번호) · 이름 없는 줄은 흐린 "(이름 없음)" */
.im-serial{font-weight:var(--w-bold);color:var(--ink);font-variant-numeric:tabular-nums;}
.im-res-tbl tr.undone .im-serial{color:var(--ink-3);}
.im-tbl td.c-name .im-noname{font-weight:var(--w-reg);}
.im-card-sn{font-size:var(--t-md);white-space:nowrap;}
.im-why{display:block;margin-top:6px;font-size:var(--t-sm);color:var(--ink-2);}
.im-res-tbl tr.undone td{color:var(--ink-3);}
/* 카드(모바일) */
.im-cards{display:none;flex-direction:column;gap:var(--s3);}
.im-card{background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--sh-1);padding:var(--s4);}
.im-card.bad,.im-card.fail,.im-card.undofail{box-shadow:0 0 0 2px var(--dang-soft),var(--sh-1);}
.im-card-h{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;}
.im-card-line{font-size:var(--t-xs);color:var(--ink-3);font-weight:var(--w-semi);}
.im-card-nm{font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--ink);overflow-wrap:anywhere;}
.im-card-nm.im-noname{color:var(--ink-3);font-weight:var(--w-semi);font-size:var(--t-md);}
.im-dl{margin:var(--s3) 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px var(--s4);}
.im-dl > div{display:contents;}
.im-dl dt{font-size:var(--t-sm);color:var(--ink-3);}
.im-dl dd{margin:0;font-size:var(--t-md);color:var(--ink);overflow-wrap:anywhere;}
.im-dl .is-bad dt,.im-dl .is-bad dd{color:var(--dang);font-weight:var(--w-bold);}
.im-card-v{margin-top:var(--s3);}
/* ---- 진행 ---- */
.im-prog-card{background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--sh-1);padding:var(--s8) var(--s6);max-width:640px;margin:var(--s6) auto;
display:flex;flex-direction:column;gap:var(--s4);}
.im-prog{height:16px;border-radius:var(--r-full);background:var(--fill-2);overflow:hidden;}
.im-prog span{display:block;height:100%;width:0;border-radius:inherit;background:var(--accent);transition:width var(--dur-3) var(--ease);}
.im-prog-text{margin:0;font-size:var(--t-lg);font-weight:var(--w-bold);color:var(--ink);}
/* ---- 결과 버튼 ---- */
.im-res-btns{display:flex;gap:var(--s3);flex-wrap:wrap;}
.im-res-btns .btn.dang{color:var(--dang);}
/* ---- 아래 고정 줄(미리보기) ---- */
.im-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:flex-end;gap:var(--s3);
padding:var(--s3) var(--s8) calc(var(--s3) + env(safe-area-inset-bottom,0px));
background:var(--panel);box-shadow:0 -1px 0 var(--line-2),var(--sh-pop);}
.im-go{min-width:240px;}
/* ---- 사진(feedback-zero-1013 §A) — 방법 1 칸 ---- */
.im-step-note{font-size:var(--t-sm);color:var(--ink-3);}
.im-ph{background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--sh-1);padding:var(--s5) var(--s6);display:flex;flex-direction:column;gap:var(--s3);
transition:box-shadow var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease);}
.im-ph-h{display:flex;gap:var(--s4);align-items:flex-start;}
.im-ph-ic{width:44px;height:44px;border-radius:14px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:0 0 auto;}
.im-ph-t{margin:4px 0 4px;font-size:var(--t-xl);font-weight:var(--w-bold);color:var(--ink);letter-spacing:-.015em;line-height:1.3;}
.im-ph-t small{font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink-3);}
.im-ph-btns{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;}
.im-ph-sum{display:flex;flex-direction:column;gap:4px;padding:var(--s3) var(--s4);border-radius:var(--r-lg);background:var(--fill);font-size:var(--t-md);color:var(--ink-2);line-height:1.55;}
.im-ph-sum p{margin:0;}
.im-ph-sum b{color:var(--ink);font-weight:var(--w-bold);}
.im-ph-sum b.ok{color:var(--ok);}
.im-ph-sum b.warn{color:var(--warn);}
.im-ph-bad{color:var(--dang);font-weight:var(--w-semi);}
.im-ph-muted{color:var(--ink-3);font-size:var(--t-sm);}
.im-ph-unused summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:var(--t-md);font-weight:var(--w-semi);color:var(--link);}
.im-ph-unused ul{margin:var(--s2) 0 0;padding:0 0 0 20px;columns:2 220px;font-size:var(--t-sm);color:var(--ink-2);line-height:1.6;}
/* 줄마다 작은 사진 */
.im-tbl td.c-photos{min-width:120px;}
.im-ph,.im-at{position:relative;}
.im-file:focus-visible + label.btn{outline:3px solid var(--accent-ring);outline-offset:2px;}
dd.c-photos{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.im-thumbs{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;}
.im-thumbs img{width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--fill);display:block;}
.im-thumbs img.bad{opacity:.4;outline:2px solid var(--dang);outline-offset:-2px;}
.im-more{min-width:36px;height:44px;padding:0 6px;border-radius:10px;background:var(--fill-2);color:var(--ink);font-size:var(--t-sm);font-weight:var(--w-bold);display:grid;place-items:center;}
.im-ph-n{margin-left:6px;font-size:var(--t-sm);color:var(--ink-3);vertical-align:middle;}
.im-ph-miss{display:block;margin-top:4px;font-size:var(--t-sm);color:var(--dang);font-weight:var(--w-semi);}
.im-ph-none{font-size:var(--t-sm);color:var(--ink-3);}
.im-ph-names{font-size:var(--t-sm);color:var(--ink-2);}
.im-thumbs img:not([src]){outline:1px dashed var(--line-3);outline-offset:-1px;} /* 아직 안 푼 작은 사진(zip·엑셀 안 — 보이는 줄만 그때 풂) */
.im-ph-small{display:block;margin-top:4px;font-size:var(--t-sm);color:var(--warn);font-weight:var(--w-semi);}
/* (v2.34) 시작 2단계 — 사진 넣는 법 3가지 펼침(글자만) */
.im-ph-srcn{white-space:nowrap;} /* (v2.34) 출처 요약 — "고른 사진 / 0장"처럼 숫자만 다음 줄로 가지 않게 */
.im-howph{margin-top:var(--s1);border-radius:var(--r-lg);background:var(--fill);}
.im-howph summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:6px;padding:0 var(--s4);font-size:var(--t-md);font-weight:var(--w-semi);color:var(--link);list-style:none;}
.im-howph summary::-webkit-details-marker{display:none;}
.im-howph summary::after{content:"›";font-size:1.2em;line-height:1;transition:transform var(--dur-2) var(--ease);}
.im-howph[open] summary::after{transform:rotate(90deg);}
.im-howph-list{margin:0;padding:0 var(--s4) var(--s4) calc(var(--s4) + 20px);display:flex;flex-direction:column;gap:var(--s2);font-size:var(--t-sm);color:var(--ink-2);line-height:1.6;}
.im-howph-list b{color:var(--ink);}
/* 결과 줄 사진 */
.im-ph-line{display:block;margin-top:6px;font-size:var(--t-sm);color:var(--ok);font-weight:var(--w-semi);}
.im-ph-line.has-bad{color:var(--warn);}
.im-ph-line .im-why-list{font-weight:var(--w-reg);}
#im-ph-res b{display:block;}
#im-ph-res p{margin:2px 0 0;}
.im-prog2{display:flex;flex-direction:column;gap:var(--s3);}
#im-result > :not([hidden]) + :not([hidden]){margin-top:var(--s3);}
/* ---- 사진 붙이기(방법 2) ---- */
.im-at{background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--sh-1);padding:var(--s5) var(--s6);display:flex;flex-direction:column;gap:var(--s3);
scroll-margin-top:16px;transition:box-shadow var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease);}
.im-at-head{display:flex;align-items:center;gap:var(--s3);}
.im-at-head .im-ph-t{flex:1;margin:0;}
.im-at-work{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s5);align-items:start;margin-top:var(--s2);}
.im-at-view{display:flex;flex-direction:column;gap:var(--s3);min-width:0;}
.im-at-top{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;}
.im-at-n{font-size:var(--t-xl);font-weight:var(--w-black);color:var(--ink);}
.im-at-fn{font-size:var(--t-sm);color:var(--ink-3);overflow-wrap:anywhere;min-width:0;}
.im-at-fn.bad{color:var(--dang);font-weight:var(--w-semi);}
.im-at-photo{background:var(--fill);border-radius:var(--r-lg);height:min(56vh,520px);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.im-at-photo img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.im-at-nav{display:flex;gap:var(--s2);flex-wrap:wrap;}
.im-at-nav .btn{flex:1 1 0;min-width:0;}
.im-at-who{display:flex;flex-direction:column;gap:var(--s3);min-width:0;}
.im-at-q{margin:0;font-size:var(--t-xl);font-weight:var(--w-black);color:var(--ink);}
.im-at-done{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);padding:var(--s4);border-radius:var(--r-lg);background:var(--ok-soft);}
.im-at-done-t{margin:0;font-size:var(--t-lg);color:var(--ink);line-height:1.5;}
.im-at-done-t b{font-weight:var(--w-black);}
/* 사진 붙일 개체 찾기 = 공용 찾기 칸(.f-search · .lt-qx — css/ui.css, 2026-10-15 앱 전체 통일) — 여기서는 폭만 */
.im-at-findbox{width:100%;}
.im-at-geckos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s2);max-height:min(52vh,480px);overflow:auto;padding:2px;}
.im-at-g.btn.lg{height:auto;min-height:64px;padding:8px 12px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;text-align:left;white-space:normal;}
.im-at-g b{font-size:var(--t-md);font-weight:var(--w-bold);overflow-wrap:anywhere;}
.im-at-g small{font-size:var(--t-xs);color:var(--ink-3);font-weight:var(--w-semi);}
.im-at-g[disabled] .im-at-gn{color:var(--warn);}
/* (v2.35.3 긴급 2 — 사용자 2026-11-04 "네비게이터가 아래에 안 붙어있고 화면이랑 같이 위로 올라가") 사진 붙이기 아래 줄(고른 수 · [사진 올리기]):
칸 안 줄(휴대폰은 칸 안에서만 붙는 sticky)이라 사진 붙이기 칸 끝을 지나 아래 결과 목록을 보면 같이 위로 올라갔음 →
확인 화면 아래 줄(.im-bar)처럼 화면 아래에 고정(모든 폭 · 여백은 .im-bar 와 같게). 가리는 만큼은 .im-main 아래 여백이 받음 · 칸을 닫으면(#im-at hidden) 같이 사라짐 */
.im-at-go{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin:0;
padding:var(--s3) var(--s8) calc(var(--s3) + env(safe-area-inset-bottom,0px));background:var(--panel);box-shadow:0 -1px 0 var(--line-2),var(--sh-pop);}
.im-at-sum{flex:1;margin:0;font-size:var(--t-md);font-weight:var(--w-semi);color:var(--ink-2);}
@media (max-width:1100px){
.im-steps{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:900px){
.im-at-work{grid-template-columns:minmax(0,1fr);}
.im-at-photo{height:min(46vh,420px);}
}
@media (max-width:768px){
body.im-page{font-size:17px;}
html{--im-top-h:72px;} /* 머리 실제 높이(큰 단추 56 + 위아래 8) — 아래 도마도 꼴(64)이 덮음 */
.im-top{padding:var(--s2) var(--s4);}
.im-main{padding:0 var(--s4) calc(130px + env(safe-area-inset-bottom,0px));gap:var(--s4);} /* (v2.35.3) 아래 고정 줄 + 아이폰 홈 막대 자리 */
.im-head .page-title{font-size:var(--t-2xl);}
.im-head .page-sub{font-size:var(--t-md);}
.im-step{padding:var(--s5) var(--s4);}
.im-step .btn{width:100%;}
.im-drop-hint{display:none;}
.im-filebar{flex-wrap:wrap;}
.im-filebar .btn{width:100%;}
.im-sum{font-size:var(--t-lg);}
.im-tblwrap{display:none;}
.im-cards{display:flex;}
.im-res-btns .btn{width:100%;}
.im-ph,.im-at{padding:var(--s4);}
.im-ph-btns .btn{flex:1 1 100%;}
.im-ph-dirbtn{display:none;} /* 휴대폰은 폴더 고르기를 거의 못 한다 — 선택지 줄이기 */
.im-ph-unused ul{columns:1;}
.im-at-geckos{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;}
.im-at-go{padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom,0px));} /* (v2.35.3) 아래 고정 줄 — 휴대폰 옆 여백 */
.im-at-go .btn{width:100%;}
.im-bar{padding-left:var(--s4);padding-right:var(--s4);}
.im-bar-re{flex:0 0 auto;}
.im-go{flex:1;min-width:0;}
}
/* (v3.0 도마도 2차-R — team/contracts/domado-ui.md §5·§6) 휴대폰: 머리 = 상세 쪽 머리(.cp-top 2차-R)와 같은 꼴 — 높이 64 · 여백 선 --page-x ·
‹ 개체 목록으로 = 공용 상세 머리(.ms-backhead — ui.css ⑫)와 같은 글자 단추(Pretendard 600 17 진한 글 · 꺾쇠가 여백 선에) ······ 매장 이름(보조 15 · 말줄임) · 쪽 제목 Pretendard 700 --fs-title ·
본문 옆 여백 --page-x · 상자 = 공용 .box 와 같은 흰 둥근 상자(--r-xl) · 설명 줄은 낱말 사이에서만 줄바꿈(한 글자 줄 없음) */
@media (max-width:768px){
html{--im-top-h:64px;}
.im-top{padding:12px var(--page-x) 0;gap:var(--s2);flex-wrap:nowrap;}
.im-top > .im-back{flex:0 0 auto;min-width:44px;height:44px;min-height:44px;margin-left:-7px;padding:0 6px 0 0;gap:1px;border-radius:var(--r-ctl);background:transparent;box-shadow:none;
color:var(--ink);font-size:17px;font-weight:600;line-height:1;letter-spacing:-.01em;white-space:nowrap;}
.im-top > .im-back svg{flex:0 0 auto;width:24px;height:24px;stroke-width:2.2;}
.im-where{flex:0 1 auto;font-size:var(--fs-chip);font-weight:600;color:var(--ink-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.im-where b{font-weight:var(--w-semi);}
.im-main{padding-left:var(--page-x);padding-right:var(--page-x);gap:var(--gap-block);}
.im-head{margin:20px 0 0;} /* 머리 아래 쪽 제목 사이 = 공용 상세 머리 꼴(ui.css ⑫ .ms-dtitle 위 20) */
.im-head .page-title{font-family:var(--font);font-weight:700;font-size:var(--fs-title);line-height:1.25;letter-spacing:-.02em;word-break:keep-all;overflow-wrap:anywhere;}
}
.im-step-d,.im-gate-d,.im-note{word-break:keep-all;overflow-wrap:anywhere;}
/* (v3.0 2차-R — domado-ui.md §7 극단 화면 · 컨테이너 질의) 단계 목록 칸이 좁으면(300px 이하 — 320 이하 폰·확대) 번호 옆 글 칸이 200px 밑으로 줄어
한두 낱말씩 꺾이고 [사진은 이렇게 함께 올려요]가 두 줄이 되던 것 → 번호·제목 한 줄 · 설명·단추·펼침은 상자 폭 꽉(번호 밑까지) */
.im-steps{container:im-steps / inline-size;}
@container im-steps (max-width:300px){
.im-step{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:var(--s3);row-gap:var(--s3);align-items:center;}
.im-step > .im-step-b{display:contents;}
.im-step-b > *{grid-column:1 / -1;justify-self:start;min-width:0;max-width:100%;}
.im-step-b > .im-step-t{grid-column:2;margin:0;}
.im-step-b > :is(.btn,.im-step-d){justify-self:stretch;}
}
/* (v2.35.3 · 사용자 2026-11-04 "사진도 함께 올리기 안내문에 문장이 끝나면 줄바꿈 해줘") 안내 글 = 한 문장 한 줄(문장 끝
— import.html · js/import.js sentences()).
문장 안에서 꺾일 때 마지막 줄에 한 낱말("돼요.")만 남지 않게 pretty(모르는 브라우저는 그대로) */
.im-step-d,.im-howph-list li,.im-note,.im-ph-sum p,.im-gate-d,.im-err,.im-head .page-sub{text-wrap:pretty;}
/* (v2.35.3 긴급 2) 아래 고정 줄이 화면에 안 붙고 같이 올라가는 것 막기 — 이 화면은 휴대폰 틀(css/m-shell.css)을 안 읽어서 다른 휴대폰 화면에 있는
확대 막기 세 가지가 빠져 있었음. 화면이 확대되면(두 번 누르기·글자 칸 초점 확대·옆으로 넘친 화면 축소) position:fixed 줄은 '보이는 곳'이 아니라
원래 화면 기준이라 굴릴 때 내용과 같이 움직여 보인다(아이폰 사파리). ① 두 번 눌러 확대 끔(m-shell.css 는 단추·링크만 — 여기는