/*
 * 엑셀로 한 번에 등록(import.html) — 데스크톱·모바일 공용 한 장(반응형). 색 = 토큰만(하드코딩 색 없음, 다크 대응).
 * 구성 B(큰 라운드 면·부드러운 그림자). 40대+ 원칙: 본문 16~17px, 보조 14px↑, 누르는 곳 48px↑(주 행동 56px), 글자 라벨.
 * 미리보기·결과: 넓은 화면 = 표(.im-tbl), 768px 이하 = 줄별 카드(.im-cards).
 */
body.im-page{min-height:100vh;}
.im-top{max-width:var(--page-max);margin:0 auto;min-height:80px;display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3) var(--s8);}
.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) 140px;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);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;font-size:var(--t-md);color:var(--ink-2);line-height:1.65;}
.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;}
.im-tbl td.c-morphs,.im-tbl td.c-tags{min-width:120px;}
.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:220px;}
.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);}
.im-res .im-serial,.im-card-v .im-serial{margin-left:8px;font-size:var(--t-md);font-weight:var(--w-bold);color:var(--ink);}
.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-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:150px;}
.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-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);}
.im-at-go{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding-top:var(--s3);border-top:1px solid var(--line-2);}
.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;}
  .im-top{padding:var(--s2) var(--s4);min-height:68px;}
  .im-main{padding:0 var(--s4) 130px;gap:var(--s4);}
  .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{position:sticky;bottom:0;background:var(--panel);padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom,0px));}
  .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;}
}
@media (prefers-reduced-motion:reduce){.im-prog span,.im-drop{transition:none;}}