/*
 * Ezpz Drop 디자인 전부.
 *
 * 색은 ezpzfile.com 본 사이트에서 가져왔다. 두 서비스가 다른 회사 것으로
 * 보이지 않으려면 파랑 하나는 같아야 한다.
 *
 * 다크 모드는 두지 않는다. 본 사이트에 없고, 한쪽에만 있으면 오가는 사이에
 * 화면이 뒤집힌다.
 */
:root {
  /* 글자 */
  --ink: #0b1020;
  --ink-2: #364059;
  --muted: #66708c;
  --faint: #a8b0c4;

  /* 면 */
  --bg: #ffffff;
  --panel: #ffffff;
  --sunken: #f4f6fb;
  --line: #e3e7ef;

  /* 강조. 본 사이트 로고에서 뽑은 값이다. */
  --accent: #0155ff;
  --accent-strong: #0146d6;
  --accent-soft: #6fa5ff;
  --accent-ink: #ffffff;
  --cyan: #00c8ff;

  --ok: #009478;
  --warn: #8a5a12;
  --danger: #c0271e;

  --radius: 16px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow: 0 0 0 1px rgb(11 16 32 / 0.06), 0 1px 2px -1px rgb(11 16 32 / 0.06),
    0 2px 4px rgb(11 16 32 / 0.04);
  --shadow-lift: 0 18px 40px -20px rgb(11 16 32 / 0.28);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/*
 * 배경의 원이 화면보다 넓다. 가로 스크롤이 생기지 않게 잘라 둔다.
 * html 에만 걸면 스크롤 상자가 body 로 넘어가 모바일에서 그대로 밀린다.
 * clip 을 쓰는 이유는 hidden 과 달리 스크롤 상자를 만들지 않아서다.
 * 모르는 브라우저를 위해 hidden 을 먼저 적어 둔다.
 */
html, body { overflow-x: hidden; overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px 16px;
  -webkit-font-smoothing: antialiased;
}

/* ── 머리 ─────────────────────────────────────────────────────── */

.top {
  width: 100%;
  max-width: 560px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.brand img { display: block; }
button.lang {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-2);
}
button.lang svg { width: 17px; height: 17px; flex: none; }

/*
 * 내용이 화면보다 길어지면 flex 가 항목을 눌러서 서로 겹친다. 보낸 내역이
 * 쌓였을 때 실제로 겹쳐 보였다. 그래서 자식들은 줄어들지 않게 못 박는다.
 *
 * 세로 가운데 맞춤은 safe center 로 한다. 예전에는 첫 자식과 마지막 자식에
 * margin: auto 를 주었는데, 마지막 자식이 감춰진 덩어리(.hide 는
 * display:none)라 플렉스 항목이 아니었다. 아래쪽 auto 가 아무 일도 하지
 * 않아 위쪽 auto 혼자 남은 여백을 다 먹었고, 본문이 화면 한참 아래로
 * 밀렸다(h1 의 margin-top 계산값이 458px 이었다). safe center 는 들어가면
 * 가운데, 넘치면 위에서부터라 어느 자식이 감춰져 있든 상관없다.
 */
main {
  width: 100%;
  max-width: 560px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  gap: 14px;
  padding: 16px 0 32px;
}
main > * { flex: none; }

/*
 * 차례.
 *
 * 평소에는 기기 목록이 맨 위다 — 들어오자마자 주변에 누가 있는지 보여야
 * 하고, 그게 이 화면의 첫인상이다.
 *
 * 보낼 것을 고른 뒤에는 차례가 뒤집힌다. 사람 머릿속 순서가 **무엇을 →
 * 어디로** 이기 때문이다. 고른 파일이 위에 있고 보낼 곳이 그 아래 있어야
 * 눈이 그대로 내려간다. 목록이 위에 있으면 파일을 고른 뒤 눈이 아래로
 * 갔다가 다시 위로 올라와야 하고, 좁은 화면에서는 그 목록이 아예 화면
 * 밖으로 밀린다 — 어디를 눌러야 보내지는지 모르게 되는 이유가 이것이다.
 *
 * 자리를 옮기는 것은 차례(order)로만 한다. HTML 은 그대로 둬야 화면 낭독기와
 * 탭 이동이 보이는 순서와 어긋나지 않는다. 그리고 **고른 뒤에만** 건드린다 —
 * 평소에도 차례를 주면 표제보다 위로 올라가서 제목이 한가운데 파묻힌다.
 */
main.sending #devices { order: 1; }
main.sending #sent { order: 2; }
/* 이끄는 글이 뒤따를 때만 당긴다. 표제 혼자면 그대로 둔다. */
main > h1:has(+ .sub) { margin-bottom: -10px; }
main > .sub { margin-bottom: 2px; }

/* 표제와 놓는 자리는 궤도 한가운데를 함께 쓴다. 표제만 왼쪽에 있으면
   원의 중심과 어긋나 무게가 한쪽으로 쏠린다. 아래 상자들은 서식이라
   왼쪽 정렬 그대로 둔다. */
h1, .sub { text-align: center; }
h1 {
  font-size: 1.9rem;
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  word-break: keep-all;
}
html:not([lang='ko']) h1, html:not([lang='ko']) .sub { word-break: normal; }
h1, .sub { overflow-wrap: anywhere; }
.sub { color: var(--muted); margin: 0; font-size: 0.96rem; word-break: keep-all; }

/* ── 놓는 자리와 그 뒤의 원 ───────────────────────────────────── */

/*
 * 원을 놓는 자리 뒤에 깐다.
 *
 * #pick 에 z-index 를 주면 안 된다. 쌓임 맥락이 생겨서 그 안의 z-index:-1 이
 * #pick 밖으로 내려가지 못한다. 그러면 원이 표제 위를 지나간다. 쌓임 맥락을
 * 만들지 않으면 음수 z-index 는 일반 흐름 요소들보다 뒤로 간다.
 */
#pick { position: relative; }

/* 궤도의 중심이자 놓는 자리. 크기가 원과 똑같아야 중심이 어긋나지 않는다. */
.ring { position: relative; display: grid; place-items: center; }

/*
 * 본 사이트 첫 화면(HeroOrbit)과 같은 궤도다. 지름 620·880·1160·1460 에
 * 안에서 바깥으로 갈수록 연해지고, 가운데 두 원에만 좌우 호로 색이 돈다.
 * 값을 눈대중으로 옮기면 두 화면이 미묘하게 달라 보이므로 그대로 쓴다.
 */
.orbit {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  z-index: -1;
  pointer-events: none;
}
.orbit i {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.orbit i:nth-child(1) { width: 620px; height: 620px; }
.orbit i:nth-child(2) { width: 880px; height: 880px; opacity: 0.86; }
.orbit i:nth-child(3) { width: 1160px; height: 1160px; opacity: 0.72; }
.orbit i:nth-child(4) { width: 1460px; height: 1460px; opacity: 0.58; }

/* 좌우 테두리만 칠하면 수직 호 둘이 남는다. 원을 새로 그리지 않는다. */
.orbit i:nth-child(5),
.orbit i:nth-child(6) {
  border-color: transparent;
  border-inline-start-color: var(--accent-soft);
  border-inline-end-color: #a78bff;
  opacity: 0.55;
}
.orbit i:nth-child(5) { width: 880px; height: 880px; }
.orbit i:nth-child(6) { width: 1160px; height: 1160px; }

/* 놓는 자리를 원으로 둔다. 궤도 한가운데에 앉으므로 네모보다 원이 맞다. */
#pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  /* 표제와 원이 붙으면 표제가 원에 얹힌 이름표처럼 보인다. 떼어 둔다. */
  margin-top: 22px;
}
.drop {
  /* label 은 기본이 인라인이다. 그대로 두면 크기·여백이 먹히지 않는다. */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 210px;
  height: 210px;
  border: 1.5px dashed var(--line);
  border-radius: 50%;
  cursor: pointer;
  background: var(--panel);
  color: var(--faint);
  box-shadow: var(--shadow);
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease),
    color 0.15s var(--ease), box-shadow 0.2s var(--ease), scale 0.2s var(--ease);
}
.drop:hover, .drop.over {
  border-color: var(--accent);
  border-style: solid;
  background: color-mix(in srgb, var(--accent) 4%, var(--panel));
  color: var(--accent);
  box-shadow: var(--shadow-lift);
}
.drop.over { scale: 1.03; }
.pict { width: 52px; height: 52px; }

/*
 * 받는 화면의 표식. 놓는 자리가 아니므로 점선도 손 모양도 두지 않는다.
 * 같은 크기·같은 자리에 두어 보내는 화면과 한 벌로 읽히게 한다.
 */
.emblem {
  display: grid;
  place-items: center;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: var(--panel);
  color: var(--accent);
  box-shadow: var(--shadow);
}
@media (max-width: 420px) {
  .emblem { width: 176px; height: 176px; }
}

/* 설명은 원 밖, 아래에 둔다. 원 안에는 그림 하나만 있어야 조용하다. */
.dropcopy { text-align: center; }
.dropcopy strong { display: block; font-size: 1.08rem; font-weight: 600; margin-bottom: 5px; }
.dropcopy span { display: block; color: var(--muted); font-size: 0.9rem; }
.dropcopy span + span { margin-top: 2px; font-size: 0.84rem; color: var(--faint); }

@media (max-width: 420px) {
  .drop { width: 176px; height: 176px; }
  .pict { width: 44px; height: 44px; }
}

/* 받는 화면은 표식과 상태 상자 사이가 붙으면 답답하다. */
main > .ring { margin: 22px 0 8px; }

input[type=file] { display: none; }

/* ── 상자와 줄 ────────────────────────────────────────────────── */

.panel {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.row + .row { border-top: 1px solid var(--line); }
.row label { color: var(--muted); font-size: 0.92rem; }
select {
  font: inherit; color: var(--ink); background: var(--sunken);
  border: 1px solid var(--line); border-radius: 10px; padding: 7px 11px;
}
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--accent); }

button {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: 12px; padding: 13px 18px; width: 100%;
  transition: background 0.15s var(--ease), box-shadow 0.2s var(--ease), translate 0.2s var(--ease);
}
button:hover { background: var(--accent-strong); }
button:disabled { opacity: 0.45; cursor: default; }
button:disabled:hover { background: var(--accent); }
button.ghost {
  background: transparent; color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
button.ghost:hover { background: var(--sunken); color: var(--ink); }

.bar { height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; margin: 14px 0 8px; }
.bar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.2s; }
.filename { font-weight: 600; word-break: break-all; }
.meta { color: var(--muted); font-size: 0.88rem; }

.link { display: flex; gap: 8px; margin-top: 14px; }
.link input {
  flex: 1; min-width: 0; font: inherit; font-size: 0.9rem;
  background: var(--sunken); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px;
}
.link button { width: auto; white-space: nowrap; }

.note {
  margin-top: 16px; padding: 12px 14px; border-radius: 12px; font-size: 0.88rem;
  background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--ink-2);
}
.note.warn { background: color-mix(in srgb, var(--warn) 12%, transparent); }
.err { color: var(--danger); font-size: 0.92rem; margin-top: 12px; }

footer { color: var(--muted); font-size: 0.82rem; text-align: center; padding: 20px 0 8px; }
footer a { color: var(--muted); }
.hide { display: none !important; }

/* QR 은 대비로 읽힌다. 흰 바탕을 유지한다. */
.qr { margin-top: 18px; text-align: center; }
.qrimg {
  display: inline-block; line-height: 0;
  background: #fff; padding: 10px; border-radius: 14px;
  border: 1px solid var(--line);
}
.qrimg svg { display: block; width: 216px; height: 216px; }
.qracts { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.qracts button { width: auto; padding: 9px 14px; font-size: 0.9rem; }
.qrhint { color: var(--muted); font-size: 0.84rem; margin: 10px 0 0; }
@media (max-width: 380px) { .qrimg svg { width: 176px; height: 176px; } }

/* 받는 쪽 상태 */
.status { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 0.93rem; }
.dot {
  width: 9px; height: 9px; border-radius: 99px; flex: none;
  background: var(--faint); transition: background 0.3s;
}
.dot.live { background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
.dot.ok { background: var(--ok); }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.35 } }
.bar.thin { height: 4px; margin: 8px 0 0; }
@media (prefers-reduced-motion: reduce) { .dot.live { animation: none } }

/* 최근에 보낸 것 */
.sent-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.sent-row + .sent-row { border-top: 1px solid var(--line); }
.sent-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.93rem; }
.sent-row .st { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.sent-row .st.ok { color: var(--ok); }
.sent-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
button.tiny { width: auto; padding: 5px 10px; font-size: 0.8rem; font-weight: 500; }
.sent-row .x {
  flex: none; width: 26px; height: 26px; padding: 0; line-height: 1;
  border-radius: 8px; font-size: 1rem; color: var(--muted);
  background: transparent; box-shadow: none; cursor: pointer;
}
.sent-row .x:hover { color: var(--ink); background: var(--sunken); }

/* 두 가지 보내는 방식 */
.modehint { color: var(--muted); font-size: 0.85rem; margin: 8px 0 0; }
.or { display: flex; margin: 18px 0 12px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ── 모달 (언어 목록·언어 유도) ───────────────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 16px;
  padding-top: 76px;
  background: rgb(11 16 32 / 0.45);
  backdrop-filter: blur(2px);
}
@media (min-width: 640px) { .modal { align-items: center; padding-top: 16px; } }
.sheet {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--panel);
  border-radius: 20px;
  padding: 22px;
  box-shadow: var(--shadow-lift);
  outline: none;
}
.sheet-title { margin: 0; font-weight: 600; font-size: 1rem; padding-inline-end: 32px; }
/*
 * 창 닫기(×).
 *
 * 바로 아래 자식만 잡는다. 그냥 `.sheet .x` 로 두면 창 **안에 있는** 다른
 * × 까지 전부 이 규칙에 걸린다 — 맺은 기기 목록의 '끊기' × 가 절대 위치로
 * 오른쪽 위에 올라와 닫기 단추와 정확히 겹쳤고, 나중에 그려진 쪽이 위라
 * 닫으려고 누른 손가락이 매번 맺음을 끊고 있었다.
 */
.sheet > .x {
  position: absolute;
  inset-inline-end: 12px;
  top: 12px;
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: transparent; color: var(--muted); box-shadow: none;
}
.sheet > .x svg { width: 18px; height: 18px; }
.sheet > .x:hover { background: var(--sunken); color: var(--ink); }
.sheet-acts { display: flex; gap: 8px; margin-top: 18px; }
.sheet-acts .go {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 12px; padding: 11px 16px;
  font-size: 0.92rem; font-weight: 600; text-decoration: none;
}
.sheet-acts .go:hover { background: var(--accent-strong); }
.sheet-acts .ghost { width: auto; padding: 11px 16px; font-size: 0.92rem; }
/* 다 받은 뒤 뜨는 닫기. 진행 막대에 딱 붙어 한 덩어리로 보이던 것을 띄운다. */
#askdone { margin-top: 18px; }

/* 언어 목록. 스무 개라 두 칸으로 나눈다. */
.langs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  margin-top: 14px;
}
.langs a, .langs span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.langs img { flex: none; display: block; }
.langs a:hover { background: var(--sunken); color: var(--ink); }
.langs span[aria-current] { color: var(--accent); font-weight: 600; background: var(--sunken); }

/* ── 기기 목록 ──────────────────────────────────────────────────────────
 *
 * 줄 하나가 기기 하나다. 통째로 단추라 어디를 눌러도 보내진다 —
 * 작은 과녁을 겨누게 하면 손가락으로 쓰기 어렵다 (드롭존에서 겪었다).
 */
#devlist { display: flex; flex-direction: column; gap: 6px; }

.devrow {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: inherit;
  text-align: start;
  font: inherit;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.devrow:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--panel)); }
.devrow svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--muted); }

.devtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.devname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.devsub { font-size: 0.84rem; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/*
 * 보낼 것이 손에 있을 때의 줄.
 *
 * 누를 수 있다는 것만으로는 모자랐다 — 파일을 골라 놓고도 이 줄을 눌러야
 * 간다는 걸 아무도 몰랐다. 테두리에 강조색을 얹고, 할 말을 강조색으로
 * 적고, 끝에 화살표를 둔다. 화살표는 번역이 필요 없다.
 */
.devrow.ready { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.devrow.ready .devsub { color: var(--accent); font-weight: 600; }
.devrow svg.devgo {
  width: 20px; height: 20px; color: var(--accent);
  transition: translate 0.15s var(--ease);
}
.devrow:hover svg.devgo { translate: 2px 0; }
[dir='rtl'] .devrow svg.devgo { scale: -1 1; }
[dir='rtl'] .devrow:hover svg.devgo { translate: -2px 0; }

/* 진행률은 줄 바닥에 얇게 깔아 둔다. 줄 높이가 안 변해야 목록이 안 흔들린다. */
.devbar { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--line); }
.devbar i { display: block; height: 100%; background: var(--accent); transition: width 0.2s var(--ease); }

.devacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.devacts button { width: auto; }

/* 코드는 읽어 주는 글자다. 크고 띄엄띄엄. */
.codebox {
  margin: 12px 0;
  padding: 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
  text-align: center;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  /* 코드에는 숫자·영문만 들어간다. 자간이 한글에 붙으면 보기 싫다. */
  font-variant-numeric: tabular-nums;
}
@media (max-width: 420px) { .codebox { font-size: 1.5rem; } }

/*
 * 방·맺기 코드 칸.
 *
 * 꾸밈을 하나도 안 걸어 둬서 브라우저 기본 상자가 그대로 나왔다. 옆 단추는
 * 52px 인데 칸은 21px 이라 둘이 따로 놀았다. 다른 곳의 입력칸(.link input)과
 * 같은 규칙으로 맞추고, 높이도 단추와 같게 만든다.
 */
#roomin, #pairin {
  flex: 1; min-width: 0;
  font: inherit; font-weight: 600; font-size: 1.05rem;
  text-align: center; letter-spacing: 0.18em;
  /* 숫자 폭을 고정해야 한 자씩 칠 때 글자가 안 흔들린다. */
  font-variant-numeric: tabular-nums;
  background: var(--sunken); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; padding: 13px 12px;
}
/* 안내 글자에까지 자간을 주면 낱말이 흩어져 읽기 어렵다. */
#roomin::placeholder, #pairin::placeholder {
  font-weight: 400; font-size: 0.95rem; letter-spacing: normal; color: var(--muted);
}
#roomin:focus, #pairin:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
/*
 * 코드 칸이 있는 줄은 설정 줄이 아니다. 위아래 여백만 두고 선은 안 긋는다.
 * 늘려서 맞추면 칸과 단추 높이가 저절로 같아진다 — 글자 크기를 서로 맞춰
 * 가며 px 을 세는 것보다 튼튼하다.
 */
#roommodal .row, #pairmodal .row { padding: 14px 0 0; align-items: stretch; }