[hidden]{display:none !important;}
:root{
  --ink:#262b36;
  --muted:#697180;
  --soft:#f4f6f8;
  --paper:#ffffff;
  --line:rgba(38,43,54,.12);
  --blue:#4d7fd9;
  --pink:#d9578e;
  --green:#4c9a74;
  --gold:#c4943f;
  --font:"Noto Sans KR","Apple SD Gothic Neo",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  font-family:var(--font);
  color:var(--ink);
  background:#eef1f4;
  -webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}

.page{
  display:grid;
  grid-template-columns:288px minmax(0,1fr);
  gap:0;
  min-height:calc(100vh - 49px);
}
.side{
  position:sticky;
  top:49px;
  align-self:start;
  height:calc(100vh - 49px);
  overflow:auto;
  padding:20px 18px 28px;
  border-right:1px solid var(--line);
  background:#fbfcfd;
}
.home-link{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  color:#3e4654;
  font-size:.88rem;
  font-weight:800;
  text-decoration:none;
}
.side__title{margin:22px 0 18px}
.side__title span{
  display:block;
  margin-bottom:5px;
  color:#8a7182;
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.12em;
}
.side__title strong{
  display:block;
  font-size:1.45rem;
  line-height:1.14;
}
.search{
  display:grid;
  grid-template-columns:26px 1fr 26px;
  align-items:center;
  min-height:42px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset;
}
.search__ico{
  color:#8a90a0;
  text-align:center;
  font-weight:900;
}
.search input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font-size:.92rem;
}
#qclear{
  width:24px;
  height:24px;
  border:0;
  border-radius:50%;
  background:rgba(38,43,54,.08);
  color:#5b6270;
}
.filter-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:22px 0 10px;
  color:#737b89;
  font-size:.78rem;
  font-weight:900;
}
.filter-head button{
  border:1px solid var(--line);
  border-radius:8px;
  padding:5px 9px;
  background:#fff;
  color:#536071;
  font-size:.76rem;
  font-weight:800;
}
.animal-filters{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:30px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:5px 8px;
  background:#fff;
  color:#4a5260;
  font-size:.82rem;
  font-weight:800;
}
.chip .n{
  color:#89909d;
  font-size:.72rem;
}
.chip.on{
  border-color:rgba(217,87,142,.42);
  background:rgba(217,87,142,.10);
  color:#a23866;
}
.main{
  min-width:0;
  padding:30px clamp(18px,4vw,44px) 60px;
}
.main__top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}
.eyebrow{
  margin:0 0 6px;
  color:#7d8490;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.12em;
}
h1{
  margin:0;
  font-size:clamp(1.72rem,4vw,2.62rem);
  line-height:1.1;
}
.tools{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.count{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:0 11px;
  background:#fff;
  color:#4c5360;
  font-size:.86rem;
  font-weight:900;
}
.sort{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:0 10px;
  background:#fff;
}
.sort span{
  color:#7b8390;
  font-size:.78rem;
  font-weight:900;
}
.sort select{
  border:0;
  outline:0;
  background:transparent;
  color:#363d49;
  font-size:.86rem;
  font-weight:800;
}
.active-filter{
  margin:0 0 16px;
  border-left:4px solid var(--pink);
  padding:8px 12px;
  background:rgba(255,255,255,.72);
  color:#5e6570;
  font-size:.9rem;
  font-weight:800;
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(176px,1fr));
  gap:12px;
}
.card{
  position:relative;
  display:grid;
  grid-template-rows:auto 1fr;
  min-height:248px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 18px rgba(38,43,54,.06);
  transition:transform .16s, box-shadow .16s, border-color .16s;
}
.card:hover{
  transform:translateY(-3px);
  border-color:rgba(77,127,217,.28);
  box-shadow:0 14px 26px rgba(38,43,54,.10);
}
.card button{
  display:grid;
  grid-template-rows:auto 1fr;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  background:transparent;
  color:inherit;
  text-align:left;
}
.aidong-art{
  position:relative;
  display:grid;
  place-items:center;
  min-height:134px;
  background:linear-gradient(160deg,#fff 0%,#eef4ff 56%,#fff7fa 100%);
}
.aidong-art img{
  width:112px;
  height:112px;
  object-fit:contain;
  filter:drop-shadow(0 8px 12px rgba(38,43,54,.15));
}
.aidong-art.missing::after{
  content:"IDW";
  display:grid;
  place-items:center;
  width:86px;
  height:86px;
  border:1px solid rgba(77,127,217,.22);
  border-radius:50%;
  background:#fff;
  color:#6b7482;
  font-weight:900;
}
.card__body{padding:12px 13px 14px}
.no{
  display:inline-flex;
  margin-bottom:8px;
  color:#8a7182;
  font-size:.72rem;
  font-weight:900;
}
.card h2{
  margin:0 0 8px;
  font-size:1.04rem;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.pill{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  min-height:24px;
  border-radius:8px;
  padding:3px 7px;
  background:var(--soft);
  color:#596170;
  font-size:.75rem;
  font-weight:800;
}
.pill.animal{background:rgba(76,154,116,.12);color:#357252}
.pill.island{background:rgba(196,148,63,.13);color:#856124}
.empty{
  grid-column:1/-1;
  border:1px dashed var(--line);
  border-radius:8px;
  padding:34px;
  background:rgba(255,255,255,.62);
  color:#777f8c;
  text-align:center;
  font-weight:800;
}

.detail-page{
  min-height:calc(100vh - 49px);
  padding:18px clamp(16px,4vw,46px) 58px;
}
.detail-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  max-width:1160px;
  margin:0 auto 16px;
}
.backbtn,.item-link{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:0 12px;
  background:#fff;
  color:#424a57;
  font-weight:900;
  text-decoration:none;
}
.item-link{
  background:#263142;
  color:#fff;
  border-color:#263142;
}
.sheet-detail{
  display:grid;
  grid-template-columns:minmax(280px,360px) minmax(0,1fr);
  gap:16px;
  max-width:1160px;
  margin:0 auto;
}
.profile{
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 14px 28px rgba(38,43,54,.08);
}
.profile__art{
  display:grid;
  place-items:center;
  min-height:300px;
  background:linear-gradient(160deg,#ffffff 0%,#f1f6ff 54%,#fff4f8 100%);
}
.profile__art img{
  width:min(230px,70%);
  aspect-ratio:1;
  object-fit:contain;
  filter:drop-shadow(0 16px 22px rgba(38,43,54,.17));
}
.profile__body{padding:18px}
.profile .id{
  display:block;
  color:#9a7388;
  font-size:.76rem;
  font-weight:900;
  margin-bottom:8px;
}
.profile h2{
  margin:0 0 10px;
  font-size:clamp(1.7rem,4vw,2.36rem);
  line-height:1.08;
  overflow-wrap:anywhere;
}
.line{
  margin:0 0 16px;
  color:#566070;
  font-size:1rem;
  line-height:1.62;
}
.quick{
  display:grid;
  gap:8px;
}
.quick div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  border-top:1px solid rgba(38,43,54,.08);
  padding-top:8px;
  color:#4b5360;
  font-size:.9rem;
}
.quick span{
  color:#7b8390;
  font-weight:900;
}
.sections{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  align-content:start;
}
.section{
  min-height:152px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:16px;
  background:#fff;
  box-shadow:0 8px 18px rgba(38,43,54,.05);
}
.section h3{
  margin:0 0 9px;
  color:#303744;
  font-size:1rem;
}
.section p{
  margin:0;
  color:#5d6572;
  font-size:.92rem;
  line-height:1.62;
}
.section.wide{grid-column:1/-1}
.pedia-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.pedia-head h3{margin:0}
.pedia-head a{
  color:#315fae;
  font-size:.86rem;
  font-weight:900;
  text-decoration:none;
}
.pedia-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}
.pedia-slot{
  display:grid;
  place-items:center;
  aspect-ratio:1;
  border:1px solid rgba(38,43,54,.10);
  border-radius:8px;
  background:#f7f8fa;
}
.pedia-slot img{
  width:78%;
  height:78%;
  object-fit:contain;
}
.pedia-slot img.is-missing{display:none}
.pedia-slot.missing::after{
  content:"";
  width:36%;
  height:36%;
  border-radius:50%;
  background:rgba(38,43,54,.12);
}

@media (max-width:900px){
  .page{display:block}
  .side{
    position:relative;
    top:auto;
    height:auto;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .main{padding-top:22px}
  .main__top{align-items:flex-start;flex-direction:column}
  .tools{justify-content:flex-start}
  .animal-filters{max-height:132px;overflow:auto}
  .sheet-detail{grid-template-columns:1fr}
  .sections{grid-template-columns:1fr}
}
@media (max-width:540px){
  .main{padding-left:14px;padding-right:14px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .card{min-height:214px}
  .aidong-art{min-height:116px}
  .aidong-art img{width:94px;height:94px}
  .card__body{padding:10px}
  .card h2{font-size:.94rem}
  .detail-page{padding-left:12px;padding-right:12px}
  .detail-top{align-items:stretch}
  .backbtn,.item-link{justify-content:center;flex:1}
  .profile__art{min-height:238px}
  .pedia-grid{gap:6px}
}

/* ── 아이동 카드 아이콘 개선: 흰 배경 webp가 그림자와 함께 '떠 보이던' 문제 해결.
   아트존을 꽉 채워 캐릭터 확대(여백 넉넉해 잘림 없음) + 드롭섀도 제거 + 은은한 프레임 ── */
.card .aidong-art{ min-height:150px; overflow:hidden; }
.card .aidong-art img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 47%;
  filter:none;
}
.card .aidong-art::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  box-shadow: inset 0 0 22px rgba(38,43,54,.05);
  border-bottom:1px solid rgba(38,43,54,.07);
}

/* ── 상세 프로필 왼쪽 아이콘도 꽉 채우기: 정사각 패널 + cover(정사각 이미지라 잘림 없음), 드롭섀도 제거 ── */
.profile__art{
  aspect-ratio:1;
  min-height:0;
  width:100%;
  max-width:360px;
  margin-left:auto; margin-right:auto;
  overflow:hidden;
}
.profile__art img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  aspect-ratio:auto;
  filter:none;
}

/* ── 아이동 키워드 배너(2칸) — 대표 한 문장 + 5범주 콤마 나열 ── */
.section.kw-banner{ background:linear-gradient(150deg,#ffffff, #f5f9ff 58%, #fff5fb); }
.kw-eyebrow{ font-size:.7rem; font-weight:800; letter-spacing:.16em; color:#9aa2b1; text-transform:uppercase; margin-bottom:8px; }
.kw-tag{ margin:0 0 16px; font-size:clamp(1.22rem,2.3vw,1.8rem); font-weight:800; line-height:1.44;
  color:#2b303b; letter-spacing:-.01em; text-wrap:balance; }
.kw-cats{ display:grid; gap:9px; }
.kw-cat{ display:flex; gap:10px; align-items:baseline; font-size:.92rem; line-height:1.6; }
.kw-label{ flex:none; min-width:66px; font-size:.7rem; font-weight:800; color:#4d7fd9;
  background:rgba(77,127,217,.1); border:1px solid rgba(77,127,217,.2); border-radius:999px;
  padding:3px 9px; text-align:center; letter-spacing:.02em; }
.kw-list{ color:#5d6572; }
@media (max-width:540px){ .kw-cat{ flex-direction:column; gap:3px; } .kw-label{ align-self:flex-start; } }

/* ════════════ 아이동 상세 재설계 v2 (2026-07-03) — 국제 소개용: 깔끔·여백·큰 폰트·PC 우선 ════════════ */
.detail-page{ padding:30px clamp(16px,4vw,56px) 90px; }
.detail-top{ max-width:1180px; margin:0 auto 26px; }
.sheet-detail{ grid-template-columns:minmax(300px,362px) minmax(0,1fr); gap:30px; max-width:1180px; align-items:start; }

/* 프로필(왼쪽) */
.profile{ border-radius:18px; box-shadow:0 18px 40px rgba(38,43,54,.09); }
.profile__body{ padding:26px 26px 28px; }
.profile .id{ font-size:.8rem; letter-spacing:.05em; margin-bottom:12px; }
.profile h2{ font-size:clamp(1.95rem,2.5vw,2.6rem); line-height:1.1; margin-bottom:16px; }
.line{ font-size:1.1rem; line-height:1.78; color:#4c5666; margin-bottom:22px; }
.quick div{ font-size:1rem; padding:12px 0 0; }

/* 섹션 공통 */
.sections{ grid-template-columns:1fr; gap:22px; }
.section{ min-height:0; padding:28px 32px; border-radius:16px; box-shadow:0 10px 26px rgba(38,43,54,.06); }
.section h3{ font-size:1.04rem; font-weight:800; color:#7b8494; letter-spacing:.02em; margin-bottom:15px; text-transform:none; }
.section > p{ font-size:1.14rem; line-height:1.85; color:#454e5d; margin:0; }

/* 대표 한 문장 히어로 (맨 위·큼·감성) */
.section.tag-hero{ position:relative; overflow:hidden; text-align:center; padding:48px 42px 46px;
  background:linear-gradient(135deg,#fbf7ff,#f2f6ff 52%,#fff5f4); border:1px solid rgba(124,109,240,.2); }
.tag-hero__quote{ position:absolute; top:-8px; left:26px; font-size:6rem; line-height:1;
  color:rgba(124,109,240,.14); font-family:Georgia,"Times New Roman",serif; pointer-events:none; }
.tag-hero .tag-hero__line{ position:relative; margin:0; font-weight:800; letter-spacing:-.015em;
  font-size:clamp(1.55rem,2.9vw,2.45rem); line-height:1.44; color:#2a2e3a; text-wrap:balance; }

/* 아이동 키워드 — 라벨 + 태그칩(콤마 덤프 대신) */
.section.kw-banner{ background:linear-gradient(155deg,#ffffff,#f6f9ff 60%,#fdf6fb); }
.kw-eyebrow{ font-size:.74rem; font-weight:800; letter-spacing:.2em; color:#9aa2b1; text-transform:uppercase; margin-bottom:20px; }
.kw-cats{ display:grid; gap:15px; }
.kw-cat{ display:grid; grid-template-columns:100px 1fr; gap:16px; align-items:start; }
.kw-label{ min-width:0; align-self:start; font-size:.76rem; font-weight:800; color:#4d7fd9;
  background:rgba(77,127,217,.09); border:1px solid rgba(77,127,217,.2); border-radius:999px;
  padding:6px 0; text-align:center; letter-spacing:.02em; }
.kw-list{ display:flex; flex-wrap:wrap; gap:8px; color:inherit; }
.kw-chip{ font-size:.98rem; color:#4a5364; background:#eef2f8; border:1px solid rgba(38,43,54,.07);
  border-radius:8px; padding:5px 12px; line-height:1.45; }

/* 하루의 목소리 — 대사 줄바꿈·강조 */
.voice-list{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.voice-line{ padding:16px 20px; background:#f8fafc; border-left:3px solid #c2ccdb;
  border-radius:0 12px 12px 0; font-size:1.12rem; line-height:1.62; color:#3f4756; font-style:italic; }
.voice-line::before{ content:"\201C"; color:#9fb0c9; font-weight:800; margin-right:1px; }
.voice-line::after{ content:"\201D"; color:#9fb0c9; font-weight:800; margin-left:1px; }

/* 모바일 축소(PC 우선, 모바일은 줄어들어도 OK) */
@media (max-width:900px){ .sheet-detail{ grid-template-columns:1fr; } }
@media (max-width:540px){
  .section{ padding:22px 20px; }
  .section > p,.line,.voice-line{ font-size:1.02rem; }
  .section.tag-hero{ padding:34px 22px; }
  .tag-hero .tag-hero__line{ font-size:clamp(1.35rem,6vw,1.78rem); }
  .kw-cat{ grid-template-columns:1fr; gap:9px; }
  .kw-label{ justify-self:start; padding:6px 16px; }
}


/* 한국어 줄바꿈: 어절 단위로 끊어 단어/조사 중간 깨짐 방지 */
.detail-page .tag-hero__line,.detail-page .section>p,.detail-page .line,
.detail-page .voice-line,.detail-page .kw-list,.detail-page .profile h2{ word-break:keep-all; }