@charset "UTF-8";

/* ---------------- Reset ---------------- */
*{box-sizing:border-box}
html,body{height:100%}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button,header,main,article,footer,section,i{margin:0;padding:0}
fieldset,img{border:0}
ul,ol,menu,li{list-style:none}
button{border:0;background:transparent;cursor:pointer}
a{color:#005186;text-decoration:none}
a:hover,a:focus{color:#0072bc}
html,body,th,td,input,select,textarea,button{
  font-size:16px; line-height:1.5;
  font-family:"Lato","Malgun Gothic","Apple Gothic",sans-serif; color:#333; letter-spacing:-0.2px;
}
.blind,caption,legend{position:absolute;width:0;height:0;overflow:hidden;line-height:0;text-indent:-9999px}
body{background:#fff}

/* ---------------- Shell ---------------- */
.wrap{position:relative;margin:0 auto}

/* ---------------- Header / GNB ---------------- */
#header{
  position:relative;
  display:flex; align-items:center; gap:12px;
  height:64px; padding:0 16px; margin:0 auto; max-width:1200px;
}
#header h1 a{
  display:block; width:150px; height:64px;
  background:url(https://static.igem.wiki/teams/5925/images/koreacxlogo.webp) no-repeat 0 50%/contain; text-indent:-9999px;
}

/* GNB: 로고 옆 남은 공간 전부 차지 */
#gnb{
  display:flex; align-items:center; gap:12px;
  flex:1;
}

/* 1차 메뉴 가로 꽉 채우기 */
.nav-depth1{
  display:flex; align-items:center;
  flex:1;
  justify-content:space-between;
}
.nav-depth1>li{position:relative}
.nav-depth1>li::after{
  content:""; position:absolute; left:50%; bottom:-2px; transform:translateX(-50%);
  width:0; height:2px; background:#ce6249; transition:width .3s;
}
.nav-depth1>li:hover::after{width:100%}
.nav-depth1>li>a{display:block; height:64px; line-height:64px; padding:0 18px; color:#333}
.nav-depth1>li:hover>a{color:#ce6249}

/* 2차 메뉴(드롭다운) — PC 기본값은 '넓게, 가운데 정렬' */
.nav-depth2{
  position:absolute; top:64px; left:50%;
  transform:translateX(-50%);
  min-width:220px;
  max-height:0; overflow:hidden; padding:0;
  background:#fff; transition:all .3s;
  box-shadow:0 4px 8px rgba(0,0,0,.2), 0 6px 20px rgba(0,0,0,.19); z-index:1000;
  text-align:center; white-space:nowrap;
}
/* 메뉴 hover 시 펼침 */
.nav-depth1 li:hover .nav-depth2{max-height:400px; padding:12px 0}
.nav-depth2 a{display:block; padding:10px 24px}
.nav-depth2 a:hover{background:#f7e26b; color:#fff}

/* 텍스트가 긴 HUMAN PRACTICES 전용 여유폭 */
.nav-depth1>li:nth-child(5) .nav-depth2{ min-width:260px; }

/* 우측 고정 버튼 */
.btn-yellow{
  display:inline-block; padding:10px 16px 11px; border-radius:5px;
  background:#f7e26b; color:#000 !important;
  margin-left:auto;
}

/* ---- Mobile Toggle (checkbox hack) ---- */
#gnbToggle{position:absolute; opacity:0; pointer-events:none}

/* 토글 버튼(우측) — 햄버거/닫기 아이콘 전환 */
.gnb-btn{
  display:none; margin-left:auto;
  width:40px; height:40px; align-items:center; justify-content:center;
  font-size:28px; color:#333; transition:transform .2s ease;
}
.gnb-btn i{line-height:1}
.gnb-btn .icon-close{display:none;}
#gnbToggle:checked + .gnb-btn .icon-open{display:none;}
#gnbToggle:checked + .gnb-btn .icon-close{display:inline-block;}

/* ---------------- Sub Visual ---------------- */
.area-subTit{
  display:flex; justify-content:center; align-items:center;
  min-height:140px; padding:24px 16px;
  background:#235380 url(https://static.igem.wiki/teams/5925/images/bg-sub-intro.webp) no-repeat 50%/cover;
  color:#fff; text-shadow:0 0 5px rgba(0,0,0,.3);
  font-weight:700; font-size:clamp(22px,5vw,40px);
}

/* ---------------- Content ---------------- */
#subCont{
  max-width:1200px; margin:0 auto; padding:40px 16px 64px;
}
.tit-sub{font-size:clamp(20px,3.2vw,30px); margin-bottom:20px}
.tit-sub::before{
  content:""; display:inline-block; width:5px; height:25px; margin-right:10px; border-radius:3px; background:#ce6249; vertical-align:-3px;
}
.area-desc{
  display:grid; grid-template-columns: 1.1fr 1.6fr; gap:28px; align-items:start;
}
.desc-img{width:100%; height:auto; display:block; border-radius:8px}
.desc-right .desc-tit{display:block; font-size:clamp(18px,2.5vw,24px); margin:4px 0 6px}
.desc-right .desc-date{display:block; color:#777; font-size:14px; margin-bottom:16px}
.desc-right .desc-txt{font-size:16px; color:#333}

/* ---------------- Footer ---------------- */
#footer{
  display:flex; justify-content:center; align-items:center;
  height:auto; background:#eee; color:#333; padding:16px;
}

/* ---------------- Responsive (공통) ---------------- */
@media (max-width: 1024px){
  .area-desc{grid-template-columns:1fr; gap:18px}
}

@media (max-width: 960px){
  .gnb-btn{display:flex; z-index:2001}
  .nav-depth1>li::after{display:none}
  .nav-depth1>li>a{height:auto; line-height:1; padding:14px 18px; color:#fff}

  #gnb{
    position:fixed; top:64px; right:0; width:min(88vw,360px);
    height:calc(100vh - 64px); overflow:auto;
    background:#24425f; border-left:1px solid rgba(255,255,255,.15);
    box-shadow:-8px 12px 24px rgba(0,0,0,.25);
    transform:translateX(100%); transition:transform .3s ease; z-index:2000;
    display:block; padding-bottom:16px;
  }
  #gnbToggle:checked ~ #gnb{ transform:translateX(0) }

  .nav-depth1{flex-direction:column; align-items:stretch}
  .nav-depth2{position:static; top:auto; left:auto; width:100%; max-height:0; padding:0; box-shadow:none; background:#1f3a55}
  .nav-depth1>li:focus-within .nav-depth2{max-height:400px; padding:8px 0}
  .nav-depth2 a{padding:10px 16px; text-align:right; color:#dfe9f5}
  .nav-depth2 a:hover{background:#294b6d; color:#fff}

  .btn-yellow{margin:12px 16px 0; align-self:flex-start}
}

@media (max-width: 560px){
  #header{height:56px}
  #gnb{top:56px; height:calc(100vh - 56px)}
}

/* ===================================================== */
/* =============== 두 번째 블록(우선 적용) ============== */
/* ===================================================== */
:root{
  --bg:#ffffff;          /* 전체 배경 흰색 */
  --panel:#f7f8fb;       /* 패널/섹션 배경 - 아주 옅은 회색 */
  --card:#ffffff;        /* 카드 영역 - 흰색 유지 */
  --text:#1e1e1e;        /* 기본 텍스트 진한 회색-검정 */
  --muted:#6b7280;       /* 보조 텍스트 (회색 톤) */
  --accent:#0077cc;      /* 메인 포인트 색상 (밝은 블루) */
  --accent-2:#6c4be4;    /* 서브 포인트 (보라 톤) */
  --stroke:#d5d7dd;      /* 테두리/구분선 */
  --radius:18px;         /* 둥근 모서리 동일 유지 */
  --shadow:0 6px 16px rgba(0,0,0,.08); /* 밝은 그림자 */
  --gap:18px;
  --maxw:1200px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f7f8fb; --panel:#ffffff; --card:#ffffff; --text:#1c1e21; --muted:#556070; --stroke:#e7eaf0; --shadow:0 8px 24px rgba(2,6,23,.08);} 
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  
  line-height:1.55;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:28px 16px 80px}

/* HERO */
.team-hero{position:relative; border-radius:calc(var(--radius) + 6px); overflow:hidden; background:linear-gradient(135deg, #0ea5e9, #8b5cf6); box-shadow:var(--shadow)}
.team-hero .hero-img{width:100%; aspect-ratio: 21 / 9; display:block; object-fit:cover; filter:saturate(.95) contrast(.98)}
.team-hero .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55))}
.team-hero .titlebox{position:absolute; inset:auto 0 0 0; padding:20px 22px; backdrop-filter: blur(1px); background:linear-gradient(180deg, transparent, rgba(0,0,0,.32)); color:#fff}
.team-hero h1{margin:0; font-size:clamp(24px, 3.5vw, 36px); letter-spacing:.2px}
.team-hero p{margin:6px 0 0; font-size:clamp(13px, 1.6vw, 15.5px); color:#e7faff}

/* INTRO */
.intro{margin:26px 0 10px; padding:18px; border:1px solid var(--stroke); border-radius:var(--radius); background:linear-gradient(180deg, rgba(255,255,255,.02), transparent); box-shadow:var(--shadow)}
.intro h2{margin:0 0 10px; font-size:20px}
.intro p{margin:8px 0; color:var(--text)}

/* GRID */
.grid{display:grid; gap:var(--gap); grid-template-columns: 1fr}
@media (min-width:720px){ .grid{grid-template-columns: repeat(2, 1fr);} }
@media (min-width:1024px){ .grid{grid-template-columns: repeat(3, 1fr);} }

/* CARD */
.card{display:flex; flex-direction:column; border:1px solid var(--stroke); background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition: transform .25s ease, box-shadow .25s ease}
.card:hover{transform: translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.25)}

/* PHOTO (정사각 고정) */
.photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: #f2f2f2;
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.photo .badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 4px 8px;
  font-size: 0.8rem;
  border-radius: 8px;
}

.content{padding:14px 14px 16px}
.name{font-weight:800; font-size:18px; letter-spacing:.2px}
.roles{margin:6px 0 10px; color:var(--muted); font-size:13px}
details{border-top:1px dashed var(--stroke); padding-top:10px}
details>summary{cursor:pointer; list-style:none; user-select:none; color:var(--accent); font-weight:700; margin:-10px 0 6px}
details>summary::-webkit-details-marker{display:none}
details[open]>summary{color:var(--accent-2)}
.bio{font-size:14.5px; color:var(--text)}

/* details summary: label + toggle icons */
details > summary{
  display:flex; align-items:center; gap:8px;
  cursor:pointer; user-select:none;
}
details > summary .icon-open,
details > summary .icon-close{
  font-size:16px; line-height:1;
}
details > summary .icon-close{ display:none; }
details[open] > summary .icon-open{ display:none; }
details[open] > summary .icon-close{ display:inline-block; }


details > summary::after{
  content: " (open)";           /* 닫힘 상태 */
  margin-left: 6px;
  font-size: 0.9em;
  color: var(--muted);
}
details[open] > summary::after{
  content: " (close)";          /* 열림 상태 */
  color: var(--accent-2);
}



/* SECTION TITLES */
.section-title{display:flex; align-items:center; justify-content:space-between; margin:34px 2px 14px}
.section-title h3{margin:0; font-size:18px; letter-spacing:.2px; color:var(--muted)}
.section-title .divider{height:1px; background:linear-gradient(90deg, transparent, var(--stroke), transparent); flex:1; margin-left:12px}

/* PLACEHOLDER images (SVG) */
.svgph{ width:100%; height:100%; display:block; background:
  radial-gradient(220px 120px at 120% -20%, rgba(255,255,255,.18), transparent 60%),
  radial-gradient(200px 140px at -10% 130%, rgba(255,255,255,.14), transparent 50%),
  linear-gradient(135deg, rgba(110,231,255,.28), rgba(167,139,250,.28));
  position:relative;
}
.svgph::after{content:"PHOTO"; position:absolute; inset:0; display:grid; place-items:center; font-weight:900; letter-spacing:3px; color:rgba(255,255,255,.5)}

/* UTIL */
.sr{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* 두 번째 블록에 별도 반응형 없음(상단 공통 미디어쿼리 유지) */
 /* ======= Document Page (Description 등 공통 문서형 섹션) ======= */
.doc-body{max-width:900px;margin:0 auto;padding:0 4px}
.doc-h2{font-size:clamp(22px,3.2vw,28px);margin:0 0 18px;font-weight:800}
.doc-h3{font-size:clamp(18px,2.6vw,22px);margin:26px 0 12px;font-weight:800}
.doc-h4{font-size:clamp(16px,2.2vw,19px);margin:18px 0 8px;font-weight:700;color:var(--muted)}
.doc-body p{margin:10px 0;color:var(--text)}
.doc-body a{word-break:break-all}

/* 그림/표 공통: 반응형 가로폭 & 캡션 */
.doc-figure{margin:18px 0;border:1px solid var(--stroke);border-radius:12px;overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.doc-figure img{display:block;width:100%;height:auto}
.doc-figure figcaption{padding:10px 12px;font-size:14px;line-height:1.45;color:#444;background:linear-gradient(180deg,#fafafa,transparent)}

/* 참고문헌 리스트 */
.doc-refs{padding-left:18px}
.doc-refs li{margin:10px 0}

/* 모바일 여백 최적화 */
@media (max-width:720px){
  .doc-body{padding:0 2px}
  .doc-figure figcaption{font-size:13px}
}

.doc-body strong, .doc-body b { font-weight: 700; }

.doc-body a[target="_blank"] { text-decoration: underline; }


/* ==== Content lists inside #subCont (.doc-body) ==== */
#subCont .doc-body ul,
#subCont .doc-body ol{
  margin: 8px 0 16px;
  padding-left: 1.8rem;          /* 기본 들여쓰기 강화 */
}

/* 항목 간 간격 살짝 띄우기 */
#subCont .doc-body li + li{ margin-top: 6px; }

/* 중첩 리스트는 한 단계 더 들여쓰기 */
#subCont .doc-body ul ul,
#subCont .doc-body ol ol{
  margin-top: 6px;
  padding-left: 1.4rem;
}

/* ● 로 시작하는 텍스트를 '걸쳐 들여쓰기(hanging indent)'로 정렬 */
#subCont .doc-body ul li{
  /* ● 문자(2글자 폭 가량)를 밖으로 빼고 본문을 더 안쪽으로 */
  text-indent: -0.9em;           /* 첫 줄만 왼쪽으로 살짝 빼기 */
  padding-left: 1.2em;           /* 전체는 안쪽으로 밀기 */
  line-height: 1.65;
}

/* 숫자 리스트(ol)도 가독성 향상 */
#subCont .doc-body ol li{
  line-height: 1.65;
}

/* 작은 화면에서 과도한 들여쓰기 완화 */
@media (max-width: 720px){
  #subCont .doc-body ul,
  #subCont .doc-body ol{ padding-left: 1.4rem; }
  #subCont .doc-body ul li{ text-indent: -0.7em; padding-left: 1.0em; }
  #subCont .doc-body li + li{ margin-top: 4px; }
}



/* 텍스트 불릿(●)을 더 작게 보이도록: 원문 '●'는 화면 왼쪽으로 살짝 빼고,
   작은 '●'를 가상 요소로 다시 찍어줌 (텍스트 자체는 변경 없음) */
#subCont .doc-body ul.dot-small{
  list-style: none;               /* 기본 브라우저 불릿 제거 */
  padding-left: 1.8rem;           /* 전체 들여쓰기 */
}
#subCont .doc-body ul.dot-small > li{
  position: relative;
  text-indent: -1.2em;            /* 첫 글자(원문 '●')를 왼쪽으로 빼서 거의 안 보이게 */
  padding-left: 1.2em;            /* 본문은 안쪽으로 */
  line-height: 1.65;
}
#subCont .doc-body ul.dot-small > li::before{
  content: "●";                   /* 작은 불릿 재삽입 */
  position: absolute;
  left: 0;
  top: 0.55em;                    /* 수직 정렬 미세조정 */
  font-size: 0.8em;               /* ← 여기 크기만 조절하면 됨 (예: 0.7em, 0.9em) */
  line-height: 1;
  opacity: 0.9;                   /* 살짝 연하게 (선택) */
}

/* 모바일에서 간격 미세 조정 */
@media (max-width: 720px){
  #subCont .doc-body ul.dot-small{ padding-left: 1.6rem; }
  #subCont .doc-body ul.dot-small > li{
    text-indent: -1.0em;
    padding-left: 1.0em;
  }
  #subCont .doc-body ul.dot-small > li::before{ top: 0.6em; }
}


#subCont .doc-body .hl-yellow { background: #fff29c; padding: 0 .08em; border-radius: .2em; }
#subCont .doc-body .hl-red    { color: #b00020; font-weight: 700;  }

/* Long DNA/protein sequences wrap nicely on mobile */
#subCont .doc-body pre.seq{
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  line-height: 1.55;
}