/* v0.7 포털 스타일 — 어두운 남색 메뉴 · 큰 배너 · 둥근 흰 카드(그림자) · 파란 입체 아이콘
   style.css(예전 Bklit 풍) 위에 덮어씀. 기관 색은 --org (기관 관리에서 지정) */
:root {
  --bg: #f3f4f7; --panel: #ffffff; --line: #e8eaf0; --line2: #d5d9e2; --tx: #14171f; --tx2: #5f6675; --tx3: #9aa1ad;
  --accent: #2f6bff; --accent-bg: #ebf1ff; --hatch: #f0f2f6; --nav: #0d1119; --blue: #2f6bff; --blue2: #7ea6ff;
  --radius: 12px; --shadow: 0 1px 2px #0000000a, 0 4px 14px #14182412; --shadow2: 0 2px 4px #0000000d, 0 14px 28px #1418241f;
}
html[data-theme="dark"] {
  --bg: #0b0d12; --panel: #151922; --line: #232836; --line2: #2f3646; --tx: #e9ecf2; --tx2: #a5adbd; --tx3: #6f7787;
  --accent-bg: #16213a; --hatch: #1b2030; --shadow: 0 1px 2px #0006, 0 4px 14px #0005; --shadow2: 0 2px 4px #0008, 0 14px 28px #0007;
}
body { font-family: "Pretendard Variable", Pretendard, "Paperlogy", system-ui, sans-serif; background: var(--bg);
  background-image: radial-gradient(1200px 500px at 85% 110%, #ffe9db55 0, transparent 60%), radial-gradient(900px 400px at 0% 110%, #e3ecff88 0, transparent 55%);
  background-attachment: fixed; font-size: 14px; }
html[data-theme="dark"] body { background-image: none; }
.mono { font-family: "JetBrains Mono", "D2Coding", ui-monospace, Consolas, monospace; }

/* ── 위쪽 메뉴 ── */
.pnav { background: var(--nav); color: #fff; position: sticky; top: 0; z-index: 30; }
.pwrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; height: 64px; gap: 28px; }
.pbrand { display: flex; align-items: center; gap: 12px; font-weight: 800; white-space: nowrap; text-decoration: none; color: #fff; }
.pbrand .bd { font-size: 17px; letter-spacing: .3px; }
.pbrand .sep { width: 1px; height: 18px; background: #3a4252; }
.pbrand .org { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: #c9d6f2; }
.pbrand .org i { font-style: normal; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--org); border-radius: 6px; padding: 3px 6px; }
.pmenu { display: flex; align-items: center; gap: 22px; flex: 1; }
.pmenu > a, .pmenu summary { color: #e7eaf0; opacity: .85; font-weight: 600; font-size: 14.5px; text-decoration: none; padding: 6px 0; position: relative;
  cursor: pointer; list-style: none; white-space: nowrap; }
.pmenu summary::-webkit-details-marker { display: none; }
.pmenu > a:hover, .pmenu summary:hover, .pmenu .on { opacity: 1; }
.pmenu > a.on::after, .pmenu summary.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -16px; height: 2px; background: #fff; }
.pdrop { position: relative; }
.pdrop .dd { position: absolute; top: 40px; left: -12px; min-width: 190px; background: #fff; color: var(--tx); border-radius: 10px; box-shadow: 0 12px 30px #0003;
  padding: 6px; z-index: 40; }
html[data-theme="dark"] .pdrop .dd { background: #1b2030; }
.pdrop .dd.right { left: auto; right: 0; }
.pdrop .dd a, .pdrop .dd button { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 7px; color: var(--tx); text-decoration: none;
  font: inherit; font-size: 13.5px; font-weight: 500; background: none; border: 0; cursor: pointer; }
.pdrop .dd a:hover, .pdrop .dd button:hover { background: var(--bg); }
.cnt { display: inline-block; min-width: 17px; padding: 0 5px; border-radius: 9px; background: #e5484d; color: #fff; font-size: 10.5px; line-height: 17px; text-align: center; font-weight: 700; }
.pright { display: flex; align-items: center; gap: 16px; }
.pright .orgpick select { background: #1c2230; color: #fff; border: 1px solid #ffffff2a; border-radius: 8px; padding: 6px 8px; font-size: 12.5px; max-width: 200px; }
.bell { position: relative; color: #fff; opacity: .85; display: flex; }
.bell svg { width: 21px; height: 21px; }
.bell b { position: absolute; top: -6px; right: -8px; background: #e5484d; font-size: 10px; line-height: 16px; min-width: 16px; text-align: center; border-radius: 8px; color: #fff; }
.pme summary { display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none; color: #fff; }
.pme summary::-webkit-details-marker { display: none; }
.pme .av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #e3e9f6, #a9b6cd); color: #233; display: grid; place-items: center; font-weight: 800; }
.pme .nm { font-size: 13px; font-weight: 700; line-height: 1.25; }
.pme .nm small { display: block; font-size: 11px; color: #9aa3b5; font-weight: 500; }
.pme .dd { top: 46px; }
@media (max-width: 1080px) { .pmenu > a:nth-child(n+4) { display: none; } .pme .nm { display: none; } .pbrand .orglogo img { max-width: 150px; } }
@media (max-width: 700px) { .pmenu > a { display: none; } .pbrand .org { display: none; } }

/* ── 본문 공통 ── */
main { max-width: 1240px; padding: 26px 24px 60px; }
.foot { max-width: 1240px; font-family: inherit; }
.panel { border: 0; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.panel > .hd { border-bottom: 1px solid var(--line); padding: 14px 20px; }
.panel > .hd h2 { font-family: inherit; text-transform: none; letter-spacing: -.1px; font-size: 15px; font-weight: 800; color: var(--tx); }
.panel > .bd { padding: 18px 20px; }
.eyebrow { font-family: inherit; letter-spacing: .04em; font-weight: 600; }
.ph h1 { font-size: 24px; font-weight: 800; letter-spacing: -.5px; }
.kpis { border: 0; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.kpi .l { font-family: inherit; font-weight: 600; }
.kpi.hatch, .t td.zero, .empty { background-image: none; }
.t th { font-family: inherit; background: #f7f8fb; color: var(--tx2); font-size: 12px; letter-spacing: 0; }
html[data-theme="dark"] .t th { background: #1a1f2a; }
.t td { border-bottom-color: var(--line); }
.t tbody tr:hover td { background: #f7f9fd; }
html[data-theme="dark"] .t tbody tr:hover td { background: #1a1f2a; }
.btn { border-radius: 8px; background: var(--nav); border-color: var(--nav); font-weight: 700; padding: 9px 16px; }
html[data-theme="dark"] .btn { background: #e9ecf2; color: #0d1119; border-color: #e9ecf2; }
.btn.blue { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.ghost { border-radius: 8px; background: var(--panel); }
.btn.sm { padding: 5px 11px; }
input[type=text], input[type=password], input[type=email], input[type=tel], input[type=date], input[type=number], input[type=url], select, textarea {
  border-radius: 8px; border-color: var(--line2); padding: 9px 11px; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px #2f6bff22; }
.tag, .st, .mdl { border-radius: 6px; }
.flash { border-radius: 10px; border: 0; background: var(--accent-bg); box-shadow: var(--shadow); }
.err { border-radius: 10px; }
.tabs { border-radius: var(--radius) var(--radius) 0 0; }
.tabs a.on { box-shadow: inset 0 -2px 0 var(--blue); }
.stbar a.on { box-shadow: inset 0 -2px 0 var(--blue); }
dialog.dlg { border: 0; border-radius: 14px; box-shadow: 0 30px 60px #0005; }
.card { border-radius: var(--radius); }
.idlink:hover { color: var(--blue); }

/* ── 포털 첫 화면: 배너 ── */
.hero { background: #05070c; position: relative; overflow: hidden; }
.hero .slide { height: 380px; position: relative; display: none; }
.hero .slide.on { display: block; }
.hero .bgimg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero .bgimg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #05070cf0 30%, #05070c66 65%, #05070c22); }
.hero .txt { position: absolute; inset: 0; z-index: 2; }
.hero .txt .in { max-width: 1240px; margin: 0 auto; padding: 0 24px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.hero .kick { color: #9aa6bd; font-size: 15px; font-weight: 600; margin-bottom: 12px; letter-spacing: .3px; }
.hero h1 { color: #fff; font-size: 38px; line-height: 1.28; margin: 0 0 14px; font-weight: 800; letter-spacing: -.8px; max-width: 640px; }
.hero p { color: #d5dbe6; font-size: 15px; margin: 0 0 26px; max-width: 560px; }
.hero .cta { display: inline-flex; align-items: center; gap: 40px; border: 1.5px solid #cfd6e3; color: #fff; padding: 12px 18px; border-radius: 6px; font-weight: 700;
  width: max-content; font-size: 13.5px; text-decoration: none; }
.hero .cta:hover { background: #ffffff14; }
.hero .dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; }
.hero .dots i { width: 22px; height: 3px; background: #ffffff40; border-radius: 2px; cursor: pointer; }
.hero .dots i.on { background: #fff; width: 34px; }
.hero .drone { position: absolute; right: 8%; top: 60px; width: 540px; z-index: 1; opacity: .95; }
.quick { position: absolute; right: max(24px, calc((100% - 1240px)/2 + 24px)); top: 26px; width: 240px; background: #1c2230e6; border: 1px solid #ffffff22;
  border-radius: 10px; color: #fff; padding: 14px 16px; backdrop-filter: blur(6px); z-index: 4; }
.quick h3 { margin: 0 0 10px; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
.quick h3 small { font-size: 10.5px; color: #aab3c4; font-weight: 500; }
.quick .empty2 { font-size: 12px; color: #9aa3b5; line-height: 1.6; border-top: 1px solid #ffffff1c; padding-top: 10px; }
.quick a { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 7px 0; border-top: 1px solid #ffffff14; color: #fff; text-decoration: none; }
.quick a:hover { color: #9fbcff; }
.quick a span { width: 6px; height: 6px; border-radius: 50%; background: #7ea6ff; }
@media (max-width: 1000px) { .quick, .hero .drone { display: none; } .hero h1 { font-size: 28px; } }

/* ── 포털 카드 ── */
.pcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 8px 0 18px; }
.pcard { background: var(--panel); border-radius: var(--radius); padding: 20px 20px 16px; min-height: 142px; position: relative; box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column; text-decoration: none; color: var(--tx); }
.pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow2); }
.pcard h4 { margin: 0 0 8px; font-size: 15.5px; font-weight: 800; letter-spacing: -.2px; }
.pcard p { margin: 0; color: var(--tx2); font-size: 12.5px; line-height: 1.55; max-width: 74%; }
.pcard .heart { position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); display: grid; place-items: center;
  cursor: pointer; border: 0; padding: 0; }
.pcard .heart svg { width: 13px; height: 13px; fill: #b5bcc8; }
.pcard .heart.on svg { fill: #e5484d; }
.pcard .icon { position: absolute; right: 26px; bottom: 18px; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--blue2), var(--blue)); box-shadow: 0 8px 16px #2f6bff40, inset 0 1px 0 #ffffff55; }
.pcard .icon svg { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pcard .go { position: absolute; right: 12px; bottom: 14px; color: var(--tx3); font-size: 13px; }
.pcard .badge { display: inline-block; margin-top: auto; font-size: 11px; font-weight: 700; border-radius: 20px; padding: 2px 9px; width: max-content; }
.badge.red { background: #ffe9e9; color: #e5484d; } .badge.blue { background: #e8efff; color: #2f6bff; } .badge.org { background: #fff1e6; color: #d9661c; }
.badge.gray { background: var(--bg); color: var(--tx2); }
.pcard.new::before { content: "NEW"; position: absolute; top: 18px; right: 48px; font-size: 9.5px; font-weight: 800; color: #fff; background: #ff8a3d; border-radius: 4px; padding: 2px 5px; }
@media (max-width: 1000px) { .pcards { grid-template-columns: repeat(2, 1fr); } }

/* ── 공지 + 달력 ── */
.pbottom { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; }
@media (max-width: 1000px) { .pbottom { grid-template-columns: 1fr; } }
.ntc a { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); font-size: 13.5px; text-decoration: none; color: var(--tx); }
.ntc a:first-child { border-top: 0; }
.ntc .tg { font-size: 11px; font-weight: 700; border-radius: 4px; padding: 2px 7px; background: var(--bg); color: var(--tx2); white-space: nowrap; }
.ntc .tg.imp { background: #ffe9e9; color: #e5484d; }
.ntc .tg.tut { background: #e3f7f1; color: #0b8a6f; }
.ntc .d { margin-left: auto; color: var(--tx3); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pcal .mh { display: flex; align-items: center; justify-content: center; gap: 16px; font-weight: 800; font-size: 16px; margin-bottom: 8px; }
.pcal .mh a { background: var(--bg); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; color: var(--tx2); }
.pcal table { width: 100%; border-collapse: collapse; text-align: center; font-size: 12.5px; }
.pcal th { color: var(--tx3); font-weight: 600; padding: 4px 0; }
.pcal th:first-child, .pcal td.sun { color: #e5484d; }
.pcal td { padding: 5px 0 8px; position: relative; }
.pcal td.o { color: #c8ccd4; }
.pcal td.today span { background: var(--nav); color: #fff; border-radius: 50%; display: inline-grid; place-items: center; width: 26px; height: 26px; }
html[data-theme="dark"] .pcal td.today span { background: #e9ecf2; color: #0d1119; }
.pcal td .dots2 { position: absolute; bottom: 1px; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; }
.pcal td .dots2 i { width: 5px; height: 5px; border-radius: 50%; }
.pcal .lg { display: flex; gap: 12px; font-size: 11.5px; color: var(--tx2); margin-top: 6px; flex-wrap: wrap; }
.pcal .lg b { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; }
.pcal .evl { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; max-height: 150px; overflow: auto; }
.pcal .evl a { display: flex; gap: 8px; align-items: center; font-size: 12.5px; padding: 4px 0; color: var(--tx); text-decoration: none; }
.pcal .evl a i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pcal .evl a .dd2 { color: var(--tx3); font-variant-numeric: tabular-nums; width: 34px; flex: none; }

/* ── 요청 화면(수리·렌탈·코드) ── */
.req-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 14px; align-items: start; }
@media (max-width: 1000px) { .req-grid { grid-template-columns: 1fr; } }
.page-hero { background: var(--nav); color: #fff; border-radius: var(--radius); padding: 26px 28px; margin-bottom: 16px; position: relative; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; right: -60px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(#2f6bff55, transparent 70%); }
.page-hero .eyebrow { color: #9aa6bd; }
.page-hero h1 { margin: 6px 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.page-hero p { margin: 0; color: #c9d1df; }
.steps { display: flex; gap: 4px; margin: 8px 0 2px; flex-wrap: wrap; }
.steps span { font-size: 11px; padding: 3px 8px; border-radius: 20px; background: var(--bg); color: var(--tx3); font-weight: 600; white-space: nowrap; }
.steps span.done { background: #e8efff; color: #2f6bff; }
.steps span.cur { background: #2f6bff; color: #fff; }
.steps span.rej { background: #ffe9e9; color: #e5484d; }
.rq { padding: 14px 18px; border-top: 1px solid var(--line); }
.rq:first-child { border-top: 0; }
.rq .tt { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.rq .tt b { font-size: 14px; }
.rq .meta { font-size: 12px; color: var(--tx3); margin-top: 2px; }
.rq .reply { margin-top: 8px; font-size: 12.5px; background: var(--accent-bg); border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; }
.chk { display: flex; gap: 8px; align-items: center; font-size: 13px; margin: 2px 0 14px; color: var(--tx2); }

/* ── 게시글 카드(튜토리얼·신제품) ── */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1000px) { .posts { grid-template-columns: 1fr 1fr; } }
.post { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; text-decoration: none; color: var(--tx);
  display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.post:hover { transform: translateY(-3px); box-shadow: var(--shadow2); }
.post .th { aspect-ratio: 16/9; background: linear-gradient(135deg, #0d1119, #1d3a7a); background-size: cover; background-position: center; position: relative; }
.post .th .play { position: absolute; inset: 0; display: grid; place-items: center; }
.post .th .play i { width: 46px; height: 46px; border-radius: 50%; background: #ffffffd9; display: grid; place-items: center; font-style: normal; color: #0d1119; font-size: 16px; }
.post .bx { padding: 14px 16px 16px; }
.post .bx .tg { font-size: 11px; font-weight: 700; color: var(--blue); }
.post .bx h4 { margin: 4px 0 6px; font-size: 15px; font-weight: 800; }
.post .bx p { margin: 0; font-size: 12.5px; color: var(--tx2); line-height: 1.55; }
.post .bx .d { font-size: 11.5px; color: var(--tx3); margin-top: 8px; }
.filters2 { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.filters2 a { font-size: 12.5px; padding: 6px 12px; border-radius: 20px; background: var(--panel); box-shadow: var(--shadow); text-decoration: none; color: var(--tx2); }
.filters2 a.on { background: var(--nav); color: #fff; }
.article { max-width: 860px; margin: 0 auto; }
.article .body { white-space: pre-wrap; line-height: 1.75; font-size: 14.5px; }
.article .yt { aspect-ratio: 16/9; width: 100%; border: 0; border-radius: 10px; margin: 6px 0 16px; }
.article .cover { width: 100%; border-radius: 10px; margin-bottom: 16px; }

/* ── 로그인·가입: 왼쪽 어두운 배너 ── */
.auth .side { background: #05070c; color: #fff; border-right: 0; position: relative; overflow: hidden;
  background-image: radial-gradient(700px 360px at 80% 70%, #1d3a7a 0, transparent 65%), linear-gradient(100deg, #05070c 35%, #0b1630); }
.auth .side h1 { color: #fff; }
.auth .side .muted, .auth .side .faint { color: #b9c2d3; }
.auth .side .eyebrow { color: #8fa0c0; }
.auth .side .pts { background: #ffffff10; border: 1px solid #ffffff22; border-radius: 10px; overflow: hidden; }
.auth .side .pts div { border-right-color: #ffffff1c; }
.auth .side .pts b { color: #fff; }
.auth .form .btn { width: 100%; }

/* 연결 장비 숫자: 마우스 올리면 내용 (v0.7) */
.tipx { position: relative; cursor: help; border-bottom: 1px dotted var(--tx3); padding: 0 2px; }
.tipx:hover::after { content: attr(data-tip); position: absolute; right: 0; top: calc(100% + 6px); background: #0d1119; color: #fff;
  padding: 7px 10px; border-radius: 7px; white-space: nowrap; font-size: 12px; font-weight: 600; z-index: 20; box-shadow: 0 8px 20px #0004;
  font-family: "Pretendard Variable", Pretendard, sans-serif; }

/* v0.8 로고 */
.pbrand .bdlogo { height: 30px; width: auto; display: block; }
.pbrand .orglogo { background: #fff; border-radius: 7px; padding: 3px 8px; display: flex; align-items: center; height: 32px; }
.pbrand .orglogo img { max-height: 24px; max-width: 230px; display: block; }  /* 가로로 긴 로고(LX 9:1)도 보이게 */
.auth .brandrow { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.auth .brandrow img.bd { height: 34px; }
.auth .brandrow .ol { background: #fff; border-radius: 8px; padding: 4px 10px; height: 38px; display: flex; align-items: center; }
.auth .brandrow .ol img { max-height: 30px; max-width: 280px; }
.auth .form .formlogo { height: 30px; margin-bottom: 14px; }
/* 기체 현황 탭 */
.ftabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.ftabs a { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px; background: var(--panel); box-shadow: var(--shadow);
  text-decoration: none; color: var(--tx2); font-weight: 700; }
.ftabs a b { font-size: 12px; color: var(--tx3); font-weight: 700; background: var(--bg); border-radius: 10px; padding: 1px 8px; }
.ftabs a.on { background: var(--nav); color: #fff; }
.ftabs a.on b { background: #ffffff22; color: #fff; }
.filebox { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--bg); margin-top: 14px; text-decoration: none; color: var(--tx); }
.filebox .fi { width: 38px; height: 38px; border-radius: 9px; background: linear-gradient(145deg, var(--blue2), var(--blue)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 11px; }
.menuchk { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px; margin: 8px 0 10px; }
.menuchk label { display: flex; gap: 7px; align-items: center; font-size: 13px; cursor: pointer; }

/* 로그인 왼쪽 (11-09): 로고 2개 + 검은 배경에 산업용 드론 한 대만 */
.auth .side.side-photo { background: #000; background-image: radial-gradient(60% 45% at 50% 62%, #2a2f3a 0%, #111318 45%, #000 80%);
  display: flex; flex-direction: column; justify-content: flex-start; padding: 44px 48px; position: relative; overflow: hidden; }
.auth .side.side-photo .brandrow { position: relative; z-index: 2; gap: 18px; }
.auth .side.side-photo .brandrow img.bd { height: 40px; }
.auth .side.side-photo .brandrow .ol { height: 44px; padding: 6px 12px; }
.auth .side.side-photo .brandrow .ol img { max-height: 30px; max-width: 300px; }
.auth .side.side-photo .drone { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); width: min(82%, 760px); height: auto;
  filter: drop-shadow(0 30px 40px #000) brightness(.92) contrast(1.08); opacity: .96; user-select: none; pointer-events: none; }
.auth .side.side-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  background: linear-gradient(180deg, transparent, #000); }

/* 11-09 기관 로고 앞세우기 — 빛드론은 오른쪽 아래 작게 */
.pbrand .orglogo-dark { height: 26px; width: auto; max-width: 260px; display: block; }
.auth .side.side-photo .brandrow img.orgbig { height: 42px; width: auto; max-width: 92%; }
.auth .side.side-photo .opby { position: absolute; right: 36px; bottom: 30px; z-index: 3; display: flex; align-items: center; gap: 8px;
  color: #8a93a6; font-size: 12px; font-weight: 600; letter-spacing: .3px; }
.auth .side.side-photo .opby img { height: 22px; width: auto; opacity: .85; }
.auth .form .formlogo.org { height: 26px; width: auto; max-width: 100%; }
.pfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pfoot .op { display: flex; align-items: center; gap: 7px; font-size: 11.5px; }
.pfoot .op img { height: 18px; width: auto; opacity: .8; }
.pfoot .lg-dark { display: none; }
html[data-theme="dark"] .pfoot .lg-dark { display: inline; }
html[data-theme="dark"] .pfoot .lg-light { display: none; }

/* ══ 모션 (11-09, 'AQUATILIS EXPEDITION' 같은 심해·영화 느낌) ══ */
.side-photo, .hero { perspective: 1200px; }
canvas.dust { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.auth .side.side-photo .glow { position: absolute; left: 10%; right: 10%; top: 25%; bottom: 8%; z-index: 0; border-radius: 50%;
  background: radial-gradient(closest-side, #1f3a6b88, #0d1a3355 45%, transparent 75%); filter: blur(10px);
  animation: breathe 9s ease-in-out infinite; }
.auth .side.side-photo .drone-wrap { position: absolute; left: 6%; right: 6%; top: 18%; bottom: 12%; z-index: 2; display: flex;
  align-items: center; justify-content: center; will-change: transform; transform-style: preserve-3d; }
.auth .side.side-photo .drone-float { animation: floaty 7s ease-in-out infinite; width: min(100%, 780px); }
.auth .side.side-photo .drone-box { position: relative; animation: emerge 2.6s cubic-bezier(.2,.7,.2,1) both; }
.auth .side.side-photo .drone-box img.drone { position: static; transform: none; width: 100%; left: auto; top: auto;
  filter: drop-shadow(0 40px 50px #000) brightness(.9) contrast(1.1); }
.auth .side.side-photo .sheen { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: linear-gradient(100deg, transparent 38%, rgba(150,190,255,.38) 48%, rgba(230,240,255,.55) 50%, rgba(150,190,255,.3) 52%, transparent 62%);
  background-size: 260% 100%; animation: sheen 8s ease-in-out 2.8s infinite; }
.auth .side.side-photo .ground { position: absolute; left: 25%; right: 25%; bottom: 14%; height: 40px; z-index: 1; border-radius: 50%;
  background: radial-gradient(closest-side, #3a6fd055, transparent); filter: blur(14px); animation: groundpulse 7s ease-in-out infinite; }
.auth .side.side-photo .reveal { animation: fadeUp 1.6s cubic-bezier(.2,.7,.2,1) .4s both; }
.auth .side.side-photo .reveal2 { animation: fadeIn 2s ease 1.6s both; }
.auth .form .box { animation: fadeIn 1.2s ease .2s both; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-.35deg); } 50% { transform: translateY(-16px) rotate(.35deg); } }
@keyframes emerge { from { opacity: 0; transform: scale(.94) translateY(24px); filter: blur(12px) brightness(.2); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sheen { 0% { background-position: 130% 0; } 45%, 100% { background-position: -30% 0; } }
@keyframes breathe { 0%, 100% { opacity: .65; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes groundpulse { 0%, 100% { opacity: .9; transform: scaleX(1); } 50% { opacity: .45; transform: scaleX(.82); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* 홈: 배너 글씨 떠오름, 카드 차례로 */
.hero .txt .in > * { animation: fadeUp 1.1s cubic-bezier(.2,.7,.2,1) both; }
.hero .txt .in > *:nth-child(2) { animation-delay: .12s; } .hero .txt .in > *:nth-child(3) { animation-delay: .24s; } .hero .txt .in > *:nth-child(4) { animation-delay: .36s; }
.hero .drone { will-change: transform; }
.hero .txt { z-index: 3; }
.pcards .pcard { animation: fadeUp .8s cubic-bezier(.2,.7,.2,1) both; }
.pcards .pcard:nth-child(2) { animation-delay: .06s; } .pcards .pcard:nth-child(3) { animation-delay: .12s; } .pcards .pcard:nth-child(4) { animation-delay: .18s; }
.pcards .pcard:nth-child(5) { animation-delay: .24s; } .pcards .pcard:nth-child(6) { animation-delay: .30s; } .pcards .pcard:nth-child(7) { animation-delay: .36s; } .pcards .pcard:nth-child(8) { animation-delay: .42s; }
.pbottom > * { animation: fadeUp .9s cubic-bezier(.2,.7,.2,1) .45s both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ══ 배경 (11-09 '배경을 바꿔'): 짙은 남색 + 흐르는 지형 등고선(국토정보·측량) + 빛줄기 + 안개 ══ */
.auth .side.side-photo { background: #020711;
  background-image: radial-gradient(120% 70% at 50% -10%, #0e2a55 0%, #061630 38%, #030a17 70%, #01040b 100%); }
.bgmap-wrap { position: absolute; inset: -6%; z-index: 0; pointer-events: none; will-change: transform; }
.bgmap { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .2;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 55%, #000 30%, transparent 85%); mask-image: radial-gradient(75% 70% at 50% 55%, #000 30%, transparent 85%);
  animation: mapdrift 46s ease-in-out infinite alternate; }
.hero .bgmap { opacity: .14; }
.hero .bgmap-wrap { z-index: 1; }
.auth .side.side-photo .rays { position: absolute; inset: -20% -10% 30% -10%; z-index: 0; pointer-events: none; filter: blur(18px); opacity: .55;
  background: repeating-linear-gradient(100deg, transparent 0 6%, rgba(110,160,255,.10) 7%, transparent 10% 15%, rgba(140,190,255,.07) 16%, transparent 19% 26%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%);
  transform-origin: 50% 0; animation: raysway 14s ease-in-out infinite alternate; }
.auth .side.side-photo .fog { position: absolute; z-index: 1; pointer-events: none; border-radius: 50%; filter: blur(60px); }
.auth .side.side-photo .fog.f1 { width: 60%; height: 30%; left: -10%; bottom: 8%; background: #11305f55; animation: fog1 26s ease-in-out infinite alternate; }
.auth .side.side-photo .fog.f2 { width: 55%; height: 26%; right: -12%; top: 30%; background: #0d4a5a40; animation: fog2 32s ease-in-out infinite alternate; }
.auth .side.side-photo .glow { background: radial-gradient(closest-side, #2b5cb066, #12305f40 45%, transparent 75%); }
@keyframes mapdrift { from { transform: scale(1.04) translate(-1.5%, -1%); } to { transform: scale(1.12) translate(1.5%, 1.2%); } }
@keyframes raysway { from { transform: rotate(-3deg) translateX(-2%); opacity: .4; } to { transform: rotate(3deg) translateX(2%); opacity: .65; } }
@keyframes fog1 { from { transform: translateX(0); } to { transform: translateX(18%); } }
@keyframes fog2 { from { transform: translateX(0) translateY(0); } to { transform: translateX(-16%) translateY(6%); } }

/* ══ 로그인 왼쪽 v3 (11-09): 노을 현장 + 하늘의 드론 + 'LX 한국국토정보공사' 글자 모션 ══ */
.auth .side.side-hero { position: relative; overflow: hidden; background: #0b0f18; padding: 0; perspective: 1200px; }
.side-hero .scene-wrap { position: absolute; inset: -5%; z-index: 0; will-change: transform; }
.side-hero .scene { position: absolute; inset: 0; background-size: cover; background-position: 60% 50%; animation: kenburns 38s ease-in-out infinite alternate; }
.side-hero canvas.dust { z-index: 2; opacity: .6; }
.side-hero .drone-wrap2 { position: absolute; left: 30%; right: 6%; top: 12%; height: 42%; z-index: 3; display: flex; align-items: center; justify-content: center; will-change: transform; }
.side-hero .drone-float { width: 78%; animation: floaty 7s ease-in-out infinite; }
.side-hero .drone-box { position: relative; animation: emerge 2.6s cubic-bezier(.2,.7,.2,1) .2s both; }
.side-hero .drone-box img.drone { width: 100%; display: block; filter: drop-shadow(0 26px 30px #0009) brightness(.95) contrast(1.06); }
.side-hero .sheen { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background-size: 260% 100%; animation: sheen 8s ease-in-out 3s infinite;
  background-image: linear-gradient(100deg, transparent 38%, rgba(255,226,190,.35) 49%, rgba(255,250,240,.55) 50%, rgba(255,226,190,.3) 51%, transparent 62%); }
.side-hero .shade { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, rgba(6,9,16,.92) 0%, rgba(6,9,16,.55) 38%, rgba(6,9,16,.08) 70%, transparent 85%),
              linear-gradient(0deg, rgba(6,9,16,.92) 0%, rgba(6,9,16,.25) 40%, transparent 60%); }
.side-hero .hero-copy { position: absolute; left: 7%; right: 8%; bottom: 11%; z-index: 5; color: #fff; }
.side-hero .eyebrow2 { font-size: 12.5px; font-weight: 800; letter-spacing: .22em; color: #7ea6ff; margin-bottom: 18px; animation: fadeUp 1.2s ease 1.2s both; }
.side-hero .brandtitle { margin: 0; font-size: clamp(34px, 4.6vw, 68px); line-height: 1.12; font-weight: 900; letter-spacing: -.02em;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .28em; }
.side-hero .brandtitle .lx { font-family: SUIT, "Pretendard Variable", Pretendard, sans-serif; font-weight: 800; letter-spacing: -.04em;
  background: linear-gradient(100deg, #00a88f 0%, #2fe0bf 40%, #c9fff2 50%, #2fe0bf 60%, #00a88f 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: lxIn 1.4s cubic-bezier(.2,.8,.2,1) .4s both, lxShine 6s ease-in-out 2.8s infinite; filter: drop-shadow(0 0 18px #00c2a044); }
.side-hero .brandtitle .kor { display: inline-flex; overflow: hidden; padding-bottom: .08em; }
.side-hero .brandtitle .ch { display: inline-block; animation: chIn .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.9s + var(--i) * 70ms);
  text-shadow: 0 6px 30px #0008; }
.side-hero .rule { width: 0; height: 2px; margin: 22px 0 16px; background: linear-gradient(90deg, #00b894, #7ea6ff 60%, transparent);
  animation: ruleIn 1.4s cubic-bezier(.2,.8,.2,1) 2s both; }
.side-hero .sub { margin: 0; color: #c9d1df; font-size: 15px; animation: fadeUp 1.2s ease 2.3s both; }
.side-hero .opby { position: absolute; right: 32px; bottom: 26px; z-index: 6; display: flex; gap: 8px; align-items: center; color: #8a93a6;
  font-size: 12px; font-weight: 600; animation: fadeIn 2s ease 2.6s both; }
.side-hero .opby img { height: 20px; opacity: .85; }
@keyframes kenburns { from { transform: scale(1.04) translate(-1%, 0); } to { transform: scale(1.14) translate(1.5%, -1%); } }
@keyframes lxIn { from { opacity: 0; transform: translateY(30px) scale(.9); filter: blur(14px); } to { opacity: 1; transform: none; filter: drop-shadow(0 0 18px #00c2a044); } }
@keyframes lxShine { 0% { background-position: 120% 0; } 40%, 100% { background-position: -40% 0; } }
@keyframes chIn { from { opacity: 0; transform: translateY(110%) rotateX(-60deg); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ruleIn { from { width: 0; opacity: 0; } to { width: 140px; opacity: 1; } }
@media (max-width: 900px) { .auth .side.side-hero { display: none; } }

.auth .side.side-hero .brandtitle { font-size: clamp(36px, 4.4vw, 72px); margin: 0; color: #fff; }
.auth .side.side-hero .hero-copy { bottom: 12%; }

/* 드론 표 배터리 칸 (사용부서 묶음, 11-09) */
.t td.batcell { vertical-align: middle; border-left: 1px solid var(--line); background: #fafbfd; white-space: nowrap; }
html[data-theme="dark"] .t td.batcell { background: #161a24; }
.batcell .batrow { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.batcell .batrow a.mdl { text-decoration: none; }
.batcell .battot { text-decoration: none; color: var(--tx); font-size: 13px; }
.batcell .battot b { font-size: 18px; margin-right: 2px; }
.batcell .battot:hover { color: var(--blue); }

/* 드론 표가 칸이 많아 촘촘하게 + 사용부서 한 줄 (11-09) */
.t td span.rgdot, .t td .rgdot { white-space: nowrap; }
table.fleetw th, table.fleetw td { padding: 9px 9px; font-size: 12.5px; }
table.fleetw .mdl { font-size: 12px; padding: 2px 8px 2px 6px; }
table.fleetw th { white-space: nowrap; }
main.wide { max-width: 1680px; }

/* 담당자: 이름만, 누르면 연락처 (11-09) */
details.mgr { position: relative; display: inline-block; }
details.mgr summary { list-style: none; cursor: pointer; white-space: nowrap; border-bottom: 1px dotted var(--tx3); }
details.mgr summary::-webkit-details-marker { display: none; }
details.mgr[open] summary { color: var(--blue); }
details.mgr .mpop { position: absolute; left: 0; top: 24px; z-index: 30; background: var(--panel); border-radius: 10px; box-shadow: 0 12px 30px #0003;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 210px; white-space: nowrap; }
details.mgr .mpop .tel { font-family: "JetBrains Mono", Consolas, monospace; font-size: 14px; font-weight: 700; color: var(--blue); text-decoration: none; margin: 4px 0; }

/* 11-09 코드 체험판 소요 안내 */
.notice-lead { margin-top: 14px; padding: 11px 14px; border-radius: 10px; background: #f3f6ff; color: #33405c; font-size: 12.5px; line-height: 1.6; }
.notice-lead b { color: #2f6bff; }

/* 11-09 수리 기록 (연도별·날짜별) */
.rlog td { vertical-align: top; }
.rlog .yrow td { background: #f4f6fa; font-weight: 800; font-size: 13px; color: #1b2233; padding: 7px 14px; border-top: 2px solid #dfe5ef; }
.rlog .rres { margin-top: 3px; color: #0b8a6f; }
.rlog .nowrap, .nowrap { white-space: nowrap; }
.rst { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 9px; }
.rst.ok { background: #e3f7ec; color: #12804a; }
.rst.org { background: #fff1e6; color: #d9661c; }
.rst.blue { background: #e8efff; color: #2f6bff; }
.rst.gray { background: #eef0f4; color: #5b6476; }
.panel .hd form { display: inline; }
.stbar .flowarr { align-self: center; color: #b6bdca; font-weight: 700; padding: 0 2px; }

/* 11-10 기관 이름(로그인 왼쪽 큰 제목) = LX 홈페이지 제목과 같은 SUIT 굵게 (사장님: 한국국토정보공사 폰트랑 같게) */
.side-hero .brandtitle, .side-hero .brandtitle .kor, .side-hero .brandtitle .ch { font-family: SUIT, "Pretendard Variable", Pretendard, sans-serif; }
.side-hero .brandtitle { font-weight: 800; letter-spacing: -.03em; }