/* ── 랩피크(옛 피크톡) PC 웹(브라우저 렌더링) 공통 스타일. 2026-09-08 시작.
   색: imtakt.com 본사 홈 색감(플럼 #6A2F6A·와인 #89294F, 2026-09-14 밤). 그 전 터키시 블루·코발트. 후원사 코너만 임탁트 자홍. ── */
:root{
  --p:#6A2F6A; --pd:#89294F; --tint:#F7E9F7; --band:#F6F1F5; --ln:#DCCDD8;
  --ink:#222; --ink2:#555; --ink3:#8A9099; --paper:#fff; --paper2:#F6F6F8;
  --magenta:#B0399C;
}
body[data-c="cobalt"]{--p:#1D5FD0;--pd:#154AA8;--tint:#E9F0FC;--band:#F2F6FD;--ln:#DDE5F1}
body[data-c="turk"]{--p:#0B879E;--pd:#075F72;--tint:#E4F4F7;--band:#F0F8FA;--ln:#D8E8EC}
body[data-c="tq"]{--p:#05ABA0;--pd:#037D75;--tint:#E3F6F4;--band:#EFFAF9;--ln:#D3EDEA}
body[data-c="navy"]{--p:#1F4E9C;--pd:#163C7A;--tint:#EAF0F9;--band:#F3F6FB;--ln:#DFE5EE}
body[data-c="teal"]{--p:#0F6E8C;--pd:#0B5670;--tint:#E6F2F6;--band:#F1F7F9;--ln:#DBE7EC}
*{box-sizing:border-box}
html{font-size:15px}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font-family:Pretendard,"Pretendard Variable","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;line-height:1.55;word-break:keep-all;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.col{max-width:1140px;margin:0 auto;padding:0 16px}
/* body 가 세로 flex(한 줄 꼬리말을 창 바닥에 붙이려고, 2026-09-21)라 .col 이 내용 폭으로 줄지 않게 */
body>.col{width:100%}

/* 머리 — 앱 PC 머리와 같은 한 줄(2026-09-14): 마크+이름 · 메뉴 · 검색 · 공지·내 정보.
   예전 두 색 워드마크(Peak 보라 + Talk 검정)와 따로 떠 있던 유틸 줄은 걷어냈다. */
.head{display:flex;align-items:center;gap:22px;height:80px;border-bottom:1px solid var(--ln)}
.logo{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:800;letter-spacing:-.6px;color:var(--p);white-space:nowrap}
/* 머리 로고: 원 없이 브랜드색 마크만 42px(2026-09-20 "너무 작아") */
.logo i{display:flex;align-items:center;justify-content:center;width:42px;height:42px}
.logo i img{width:42px;height:42px;display:block}
.logo em{font-style:normal;color:var(--ink)} /* 랩=브랜드색, 선배=먹색 */
.menu{display:flex;flex:1;margin-left:4px;align-self:stretch}
.menu a{position:relative;display:flex;align-items:center;padding:0 14px;font-size:18px;font-weight:700;color:var(--ink)}
.menu a:hover{color:var(--p)}
.menu a.on{color:var(--p);font-weight:800}
.menu a.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--p)}
.search{display:flex;align-items:center;gap:8px;border:1.4px solid var(--p);border-radius:22px;padding:8px 14px;width:196px;color:var(--ink3);font-size:13px}
.search input{border:0;outline:0;flex:1;font:inherit;color:var(--ink);background:transparent;min-width:0}
.util{display:flex;gap:8px;font-size:12.5px;color:var(--ink3);white-space:nowrap}
.util a:hover{color:var(--ink)}
.band{background:var(--band);border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.band .col{display:flex;gap:0;height:46px;align-items:stretch}
.band a{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:0 16px;font-size:14.5px;font-weight:600;color:var(--ink)}
.band a i{display:block;width:26px;height:2.5px}
.band a.on{color:var(--p);font-weight:800}
.band a.on i{background:var(--p);border-radius:2px}

/* 본문 2단 */
.body{display:grid;grid-template-columns:224px 1fr;gap:12px;padding:16px 16px 60px}
.side{border:1px solid var(--ln);border-radius:8px;padding:8px;align-self:start;position:sticky;top:12px}
.side h4{margin:4px 10px 8px;font-size:15px;font-weight:800}
.side hr{border:0;border-top:1px solid var(--ln);margin:0 0 6px}
.side a{display:block;padding:8px 10px;border-radius:6px;font-size:14px;font-weight:600;color:var(--ink2)}
.side a:hover{background:var(--paper2)}
.side a.on{background:var(--tint);color:var(--p)}
/* 본사 삼각형 심볼(IMTAKT 응용사례 DB) — 이모지 자리 크기에 맞춤(2026-09-19) */
.side a .mk{width:14px;height:14px;vertical-align:-2px;border-radius:2px}
.panel h1 .mk{width:20px;height:20px;vertical-align:-3px;border-radius:3px;margin-right:6px}
.panel{border:1px solid var(--ln);border-radius:8px;min-width:0}
.panel h1{margin:0;padding:14px 18px;font-size:18px;font-weight:800;letter-spacing:-.3px;border-bottom:1px solid var(--ln)}
.inner{padding:12px 14px 24px}
.q{display:flex;align-items:center;gap:10px;background:var(--paper2);border-radius:24px;padding:10px 16px;color:var(--ink3)}
.q input{border:0;outline:0;background:transparent;flex:1;font:inherit;font-size:15px;color:var(--ink)}
/* 자동완성 상자(2026-09-19) — 입력칸(.q) 바로 아래 */
.qrow{position:relative;display:flex;gap:8px;align-items:stretch}
.qrow .q{flex:1;min-width:0}
.qbtn{flex:none;padding:0 22px;border:0;border-radius:24px;background:#222;color:#fff;font:inherit;font-size:14px;font-weight:800;cursor:pointer;letter-spacing:-.2px}
.qbtn:hover{background:#000}
.sug{position:absolute;left:0;right:0;top:100%;margin-top:4px;z-index:5;background:#fff;border:1px solid var(--ln);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.08);overflow:hidden}
.sug a{display:flex;align-items:center;gap:10px;padding:9px 16px;color:var(--ink);font-size:14px;text-decoration:none}
.sug a:hover,.sug a.on{background:var(--tint)}
.sug a b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sug a s{text-decoration:none;margin-left:auto;flex:none;font-size:11.5px;color:var(--ink3)}
.note{font-size:12.5px;color:var(--ink3);margin:10px 0 8px}
.info{display:flex;gap:8px;align-items:flex-start;background:var(--paper2);border:1px solid var(--ln);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--ink2);margin:10px 0}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.chip{border:1px solid var(--ln);border-radius:8px;padding:4px 10px;font-size:13px;font-weight:600;color:var(--ink2);cursor:pointer;background:#fff;user-select:none}
.chip:hover{border-color:var(--p);color:var(--p)}
.chip.on{background:var(--p);border-color:var(--p);color:#fff}
.chip.dim{color:var(--ink3)}
.count{font-size:12.5px;font-weight:700;color:var(--ink2);margin:10px 0 8px;padding-top:12px;border-top:1px solid var(--ln)}
.empty{padding:40px;text-align:center;color:var(--ink2)}
.pager{display:flex;justify-content:center;gap:4px;margin:16px 0 0;flex-wrap:wrap}
.pager a{min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ln);border-radius:6px;font-size:13.5px;font-weight:600;color:var(--ink2);padding:0 8px;cursor:pointer}
.pager a.on{background:var(--p);border-color:var(--p);color:#fff}
.pager a:hover:not(.on){border-color:var(--p);color:var(--p)}
.foot{border-top:1px solid var(--ln);padding:18px 0 40px;font-size:12.5px;color:var(--ink3)}

/* 화합물 표(APPLICATION 상자) — 응용사례·논문 사례 공용 */
.picker{border:1px solid var(--ln);border-radius:8px;margin:8px 0}
.picker .ph{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;user-select:none}
.picker .ph i{font-style:normal;font-size:11px;letter-spacing:1.2px;font-weight:800;color:var(--p)}
.picker .ph b{font-size:14px;font-weight:800}
.picker .ph .n{background:var(--tint);color:var(--p);font-weight:800;font-size:12px;border-radius:10px;padding:1px 7px}
.picker .ph .arr{margin-left:auto;color:var(--ink3);transition:transform .15s}
.picker.open .ph .arr{transform:rotate(180deg)}
.grid{display:none;grid-template-columns:repeat(4,1fr);gap:2px 6px;padding:8px;border-top:1px solid var(--ln)}
.picker.open .grid{display:grid}
.tile{display:flex;gap:8px;padding:6px;border-radius:6px;cursor:pointer;align-items:flex-start;user-select:none}
.tile:hover{background:var(--tint)}
.tile .box{width:16px;height:16px;border:1.4px solid #B8B2BC;border-radius:3px;margin-top:2px;flex:none;background:#fff;position:relative}
.tile.on .box{background:var(--p);border-color:var(--p)}
.tile.on .box::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.tile b{display:block;font-size:13px;font-weight:600;line-height:1.25}
.tile.on b{color:var(--p);font-weight:800}
.tile s{display:block;text-decoration:none;font-size:11.5px;color:var(--ink2);line-height:1.3}
.tile.dim b,.tile.dim s{color:var(--ink3)}
.clear{margin:4px 8px 8px;background:var(--paper2);border-radius:6px;text-align:center;padding:8px;font-size:12px;font-weight:800;letter-spacing:.6px;color:var(--ink3);cursor:pointer}
.picker.sel .clear{background:var(--tint);color:var(--p)}

/* 카드(논문) */
.card{border:1px solid #D9DCE2;border-radius:10px;padding:12px 14px 12px 16px;margin-bottom:10px;background:#fff}
.card:hover{border-color:#B9C2D2}
.hd{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink2)}
.hd .no{font-weight:800;font-variant-numeric:tabular-nums}
.hd .ind{border:1.2px solid var(--p);border-radius:9px;padding:1px 7px;font-size:11.5px;font-weight:800;color:var(--pd)}
.hd .j{margin-left:auto;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.t{margin:8px 0 3px;font-size:17.5px;font-weight:800;line-height:1.35;letter-spacing:-.3px;color:var(--ink)}
.t a:hover{color:var(--p)}
.te{font-size:13px;color:var(--ink2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sm{margin:10px 0;background:var(--paper2);border:1px solid #E1E1E6;border-radius:8px;padding:8px 12px}
.sm div{display:flex;gap:8px;padding:3px 0;line-height:1.6}
.sm b{flex:none;width:70px;font-size:13px;font-weight:800;color:var(--p)}
.sm span{font-size:14.5px;font-weight:500;color:var(--ink)}
.ft{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ft .cp{font-size:12.5px;font-weight:700;color:#444}
.ft .pr{border:1px solid #D9DCE2;border-radius:9px;padding:1px 7px;font-size:12px;font-weight:700;color:var(--ink)}
.ft .go{margin-left:auto;font-size:13px;font-weight:700;color:var(--p)}
.ft .go:hover{text-decoration:underline}

/* 줄 목록(공전·응용사례) */
.row{display:flex;gap:12px;align-items:flex-start;border:1px solid #D9DCE2;border-radius:10px;padding:10px 14px;margin-bottom:8px;background:#fff}
.row:hover{border-color:#B9C2D2}
.row .th{width:56px;height:56px;border-radius:6px;background:var(--paper2);flex:none;object-fit:cover;border:1px solid var(--ln)}
.row .bd{min-width:0;flex:1}
.row .bl{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:5px}
.badge{border:1px solid var(--ln);border-radius:9px;padding:1px 7px;font-size:11.5px;font-weight:800;color:var(--ink2)}
.badge.p{border-color:var(--p);color:var(--pd)}
.badge.g{border-color:#1a7f5a;color:#1a7f5a}
.badge.m{border-color:var(--magenta);color:var(--magenta)}
.row .tt{font-size:15.5px;font-weight:800;line-height:1.35;letter-spacing:-.2px;margin:0 0 3px}
.row .tt a:hover{color:var(--p)}
.row .sub{font-size:13px;color:var(--ink2);line-height:1.45}
.row .sub .no{font-weight:800;color:var(--ink3);margin-right:6px;font-variant-numeric:tabular-nums}
.row .lk{font-size:12.5px;font-weight:700;color:var(--p);white-space:nowrap;align-self:center}
.row .lk:hover{text-decoration:underline}

@media(max-width:900px){.body{grid-template-columns:1fr}.side{position:static}.menu a{padding:22px 10px 24px;font-size:15px}.search{width:180px}.grid{grid-template-columns:repeat(2,1fr)}}

/* 논문 사례 거르개 한 줄(2026-09-14): 분야 칩 + 오른쪽 컬럼 드롭다운 */
.frow{display:flex;align-items:flex-start;gap:12px;margin:8px 0}
.frow .chips{flex:1;margin:0}
.chip.more{color:var(--ink3);border-style:dashed}
select.sel{flex:none;height:32px;border:1px solid var(--ln);border-radius:8px;background:#fff;color:var(--ink2);font:inherit;font-size:13px;padding:0 10px;max-width:220px}
.picker:not(.open) .clear{display:none}

/* 꼬리말 두 단(2026-09-20) — 앱 홈 꼬리말과 같은 구성 */
/* 한 줄 꼬리말(2026-09-21, 홈 외 전 페이지) — 앱 SlimFooter 와 같은 모양: 높이 36, 위 선, 왼쪽 ©·운영사·사업자번호·전화 /
   오른쪽 개인정보처리방침·공지사항·메일(굵게·밑줄). body 가 세로 flex 라 내용이 짧아도 창 바닥에 붙는다. */
.foot1{margin-top:auto;border-top:1px solid var(--ln);background:var(--paper);font-size:12px;color:var(--ink3);line-height:1.2}
.foot1 .col{display:flex;align-items:center;justify-content:space-between;gap:16px;height:36px}
.foot1 .fl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.foot1 .fr{display:flex;align-items:center;white-space:nowrap}
.foot1 .fr a{padding:4px 6px;font-weight:500;color:var(--ink2)}
.foot1 .fr a:hover{color:var(--p)}
.foot1 .fr a.mail{font-weight:700;text-decoration:underline}
.foot1 .fr i{font-style:normal}
/* 아래 .foot2 는 옛 두 단 꼬리말(2026-09-20) 스타일 — 지금은 안 쓰지만 앱 홈판과 대조용으로 둔다. */
.foot2{margin:36px auto 30px;padding:18px 0 0;border-top:1px solid var(--ln);font-size:12.5px;color:var(--ink3);line-height:1.55}
.foot2 .flinks{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:14px;font-weight:600}
.foot2 .flinks a{color:var(--ink2)}
.fgrid{display:grid;grid-template-columns:5fr 6fr;gap:32px}
.foot2 .fco>b,.foot2 .fab>b{display:block;font-size:14px;font-weight:700;color:var(--ink2)}
.fsub{display:block;margin-bottom:8px}
.foot2 dl{display:grid;grid-template-columns:96px 1fr;row-gap:3px;margin:0}
.foot2 dt{font-weight:600}
.foot2 dd{margin:0;color:var(--ink2)}
.foot2 .mail{font-size:13.5px;font-weight:800;color:var(--ink2);text-decoration:underline}
.fnote{margin-left:8px;font-size:12px;color:var(--ink3)}
.fh{font-weight:600;margin-bottom:2px}
.foot2 ul{list-style:none;margin:0;padding:0}
.foot2 li{margin-bottom:3px}
.foot2 li b{font-weight:600;color:var(--ink2);margin-right:8px}
.fcopy{margin-top:14px;padding-top:10px;border-top:1px solid var(--ln)}
@media(max-width:900px){.fgrid{grid-template-columns:1fr;gap:16px}}