/* 폰용 화면 (index.html 전용): iOS 느낌의 간결한 한 화면. 데스크톱 앱(desktop.html)은 style.css만 사용한다. */
:root {
  --bg: #f2f2f7; --fg: #000; --muted: #8e8e93; --card: #fff; --line: rgba(60, 60, 67, .18);
  --accent: #007aff; --rec: #ff3b30; --fill: rgba(120, 120, 128, .16);
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #000; --fg: #fff; --muted: #98989f; --card: #1c1c1e; --line: rgba(84, 84, 88, .55);
    --accent: #0a84ff; --rec: #ff453a; --fill: rgba(120, 120, 128, .32); }
}
html { -webkit-text-size-adjust: 100%; }
body { font: 16px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: contain; }
button, label.filebtn { touch-action: manipulation; }
a { color: var(--accent); text-decoration: none; }

/* 로그인 */
.center { min-height: 100dvh; padding: calc(16px + var(--sat)) 24px calc(16px + var(--sab)); }
.login { text-align: center; width: 100%; max-width: 340px; background: none; border: 0; padding: 0; }
.login .logo { border-radius: 19px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.login h1 { font-size: 30px; font-weight: 700; margin: 16px 0 6px; letter-spacing: -.3px; }
.login .sub { color: var(--muted); margin: 0 0 28px; }
.login .foot { color: var(--muted); font-size: 13px; margin: 18px 0 0; }
button.primary.big { width: 100%; padding: 0 20px; min-height: 52px; border: 0; border-radius: 14px; font-size: 17px; font-weight: 600; margin: 0; background: var(--accent); color: #fff; }
button.primary.big:active { opacity: .8; }

/* 한 화면 */
#appView { display: flex; flex-direction: column; height: 100dvh; }
/* Safari 탭으로 열었을 때: 화면을 '주소창이 접힌 높이'로 만들어 위로 스크롤하면 주소창이 접히고 그대로 한 화면에 맞는다.
   (홈 화면 앱에서는 주소창이 없으므로 고정 높이) */
html:not(.app) #appView { height: auto; min-height: 100lvh; }
html:not(.app) #appView main { overflow: visible; }
html:not(.app) .center { min-height: 100lvh; }
header.bar { display: flex; align-items: center; gap: 10px; padding: calc(8px + var(--sat)) 16px 8px; background: transparent; border: 0; min-height: calc(48px + var(--sat)); }
header.bar strong { font-size: 17px; font-weight: 700; }
header.bar .muted { font-size: 12px; min-width: 0; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.link { white-space: nowrap; flex: none; background: none; border: 0; padding: 0 4px; min-height: 44px; color: var(--accent); font-size: 15px; }
button.link:hover:not(:disabled) { border: 0; }
button.link:active { opacity: .5; }

#appView main { flex: 1; min-height: 0; max-width: 520px; width: 100%; margin: 0 auto; padding: 0 16px calc(12px + var(--sab)); display: flex; flex-direction: column; gap: 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.stage { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: space-around; gap: 8px; min-height: 280px; }

/* iOS 그룹 리스트 */
.group { background: var(--card); border-radius: 12px; overflow: hidden; }
.cell { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; }
.cell + .cell { border-top: .5px solid var(--line); }
.cell label { flex: 1; font-size: 16px; }
.cell .ico { width: 20px; height: 20px; color: var(--accent); flex: none; }
.cell .folder { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell select { border: 0; background: var(--fill); color: var(--fg); border-radius: 8px; padding: 0 10px; min-height: 34px; font-size: 15px; }

/* 녹음 */
.recorder { text-align: center; }
.timer { font-size: 64px; font-weight: 200; letter-spacing: 1px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.recording .timer { color: var(--rec); }
canvas { display: block; margin: 8px auto 0; width: 100%; max-width: 260px; height: 20px; opacity: .9; }
.controls { display: flex; align-items: center; justify-content: center; gap: 28px; }
button.circle { width: 64px; height: 64px; min-height: 64px; padding: 0; border-radius: 50%; border: 0; background: var(--fill); color: var(--fg); font-size: 12px; white-space: nowrap; font-weight: 600; flex: none; transition: transform .12s ease, opacity .12s ease; }
button.circle:hover:not(:disabled) { border: 0; }
button.circle:active:not(:disabled) { transform: scale(.94); }
button.circle:disabled { opacity: .35; }
button.circle.rec { width: 92px; height: 92px; min-height: 92px; background: var(--rec); color: #fff; font-size: 17px; box-shadow: 0 0 0 5px var(--card), 0 0 0 7px var(--rec); }
button.circle.rec:disabled { opacity: .45; animation: pulse 1.6s ease-in-out infinite; }
button.circle.stop:not(:disabled) { background: var(--fg); color: var(--bg); }
@keyframes pulse { 50% { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { button.circle.rec:disabled { animation: none; } button.circle { transition: none; } }
@media (pointer: coarse) { #recBtn, #stopBtn { flex: none; } }
.msg { min-height: 1.3em; margin: 0; font-size: 14px; }

/* 업로드 목록·보조 */
#segList { margin: 0; background: var(--card); border-radius: 12px; padding: 0 14px; max-height: 18dvh; overflow-y: auto; font-size: 14px; }
#segList li { padding: 8px 0; }
.filebtn { align-self: center; border: 0; background: none; color: var(--accent); font-size: 15px; padding: 6px 12px; }
.tip { margin: 0; text-align: center; color: var(--muted); font-size: 12px; }
.more { padding: 0; border: 0; background: none; }
#reviewBox { background: var(--card); border-radius: 12px; padding: 14px; }
input { border: 0; background: var(--fill); border-radius: 10px; }
button { border-radius: 10px; }
button.primary { border: 0; }

/* 키가 작은 폰(SE 등)에서도 스크롤 없이 */
@media (max-height: 700px) {
  .timer { font-size: 52px; }
  button.circle.rec { width: 80px; height: 80px; min-height: 80px; }
  button.circle { width: 58px; height: 58px; min-height: 58px; }
  .cell { min-height: 44px; }
  .stage { min-height: 230px; }
}

/* Drive 파일 목록 */
.files { flex: none; }
.files-head { display: flex; align-items: center; padding: 0 4px 6px; }
.files-head h2 { flex: 1; margin: 0; font-size: 13px; font-weight: 400; color: var(--muted); text-transform: none; }
.files-head .link { min-height: 32px; font-size: 14px; }
.filelist { list-style: none; margin: 0; padding: 0; background: var(--card); border-radius: 12px; overflow: hidden; }
.filelist li + li { border-top: .5px solid var(--line); }
.filelist a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-height: 52px; color: var(--fg); }
.filelist a:active { background: var(--fill); }
.filelist .tag { flex: none; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--fill); color: var(--muted); }
.filelist .tag.sheet { background: rgba(52, 199, 89, .18); color: #248a3d; }
@media (prefers-color-scheme: dark) { .filelist .tag.sheet { color: #30d158; } }
.filelist .body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.filelist .nm { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filelist .meta { font-size: 12px; color: var(--muted); }
.filelist .empty { padding: 14px; color: var(--muted); font-size: 14px; text-align: center; }
#appView main > * { flex-shrink: 0; } /* 칸이 줄어들며 겹치지 않고, 넘치면 main 안에서 스크롤 */