/* gLog web client — minimal styling */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
               "Noto Sans KR", Roboto, sans-serif;
  font-size: 15px;
  color: #222;
  background: #f6f7f9;
  line-height: 1.5;
}

a { color: #2b6cb0; text-decoration: none; }
a:hover { text-decoration: underline; }

/* 모든 서브 페이지 좌측 상단 — [🏠 홈] [← 뒤로] 두 버튼 */
.back-bar {
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 14px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.back-home,
.back-prev {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e1e4ea;
  color: #2c5530;
  font-size: 18px; font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  cursor: pointer;
  padding: 0; margin: 0;
  box-sizing: border-box;
  line-height: 1;
  vertical-align: middle;
}
.back-home:hover,
.back-prev:hover { background: #eef4ef; text-decoration: none; }

.page {
  max-width: 720px;
  margin: 24px auto;
  padding: 0 16px;
}

.card {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  margin-bottom: 16px;
}

h2 { margin-top: 0; font-size: 22px; }
h3 { margin: 20px 0 8px; font-size: 16px; color: #444; }

label {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  color: #555;
  font-weight: 500;
}
label.required::after {
  content: " *";
  color: #d33;
}
input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="url"], textarea, select {
  width: 100%;
  margin-top: 4px;
  padding: 9px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  line-height: 1.4;
  font-family: inherit;
  background-color: #fff;
  box-sizing: border-box;
  min-height: 40px;
  font-family: inherit;
}
textarea { min-height: 70px; resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #2c5530;
  box-shadow: 0 0 0 2px rgba(44,85,48,0.15);
}

.row { display: flex; gap: 12px; }
.row > * { flex: 1; }

button, .btn {
  display: inline-block;
  padding: 10px 18px;
  border: none;
  border-radius: 5px;
  background: #2c5530;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 16px;
}
button:hover, .btn:hover { background: #1f3d23; }
button.secondary, .btn.secondary { background: #e2e6ea; color: #333; }
button.secondary:hover, .btn.secondary:hover { background: #cdd2d8; }
button.danger, .btn.danger { background: #c0392b; }
button.danger:hover, .btn.danger:hover { background: #962d22; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.banner {
  padding: 10px 14px;
  border-radius: 5px;
  margin-bottom: 12px;
  font-size: 14px;
}
.banner.error   { background: #fde8e6; color: #962d22; border: 1px solid #f5c6c0; }
.banner.success { background: #e3f4e6; color: #1f5e2a; border: 1px solid #b9dec0; }
.banner.info    { background: #e7f1fb; color: #1f4673; border: 1px solid #bcd6ee; }
.banner.hidden  { display: none; }

.muted { color: #888; font-size: 13px; }
.actions { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.actions button { margin-top: 0; }

.round-controls {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  align-items: stretch;
  min-width: 0;          /* flex 자식이 content size 보다 줄어들 수 있도록 */
}
.round-controls input[type="search"] {
  flex: 1 1 0;           /* 가변폭 (남는 공간 모두 차지) */
  min-width: 0;          /* placeholder 길이 때문에 안 줄어드는 것 방지 */
  margin-top: 0;
}
.round-controls select {
  flex: 0 1 auto;        /* 필요시 줄어들 수 있음 */
  margin-top: 0;
  width: auto;           /* 글로벌 select { width: 100% } override — 핵심 */
  max-width: 50%;        /* 카드 폭의 절반 이상 차지하지 않도록 */
}
@media (max-width: 520px) {
  .round-controls { flex-direction: column; }
  .round-controls select { width: 100%; max-width: none; }
}

.round-list {
  list-style: none; padding: 0; margin: 0;
}
.round-list li {
  background: #fff;
  padding: 14px 16px;
  border-radius: 6px;
  margin-bottom: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.round-list .meta {
  font-size: 13px; color: #888;
}
.round-list .meta.partners,
.round-list .meta.meals {
  margin-top: 2px;
  font-size: 12px;
  color: #5a6370;
}
.round-list .score {
  font-weight: 600;
  color: #2c5530;
  white-space: nowrap;
}
.round-list .score .diff {
  font-size: 13px;
  font-weight: 600;
  margin-left: 2px;
}
.round-list .score .diff.under { color: #1f5e2a; }   /* 목표보다 잘침 — 짙은 초록 */
.round-list .score .diff.over  { color: #c0392b; }   /* 목표 초과 — 빨강 */
.round-list .score .diff.even  { color: #888; }      /* 같음 — 회색 */

/* 라운드 카드 우측 — 목표/목표대비/최종 3줄 스택 */
.round-list .score-stack {
  display: flex; flex-direction: column;
  align-items: flex-end;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.round-list .score-stack .score-target { font-size: 14px; color: #888; }
.round-list .score-stack .score-diff   { font-size: 13px; }
.round-list .score-stack .score-diff.under { color: #1f5e2a; }
.round-list .score-stack .score-diff.over  { color: #c0392b; }
.round-list .score-stack .score-diff.even  { color: #888; }
.round-list .score-stack .score-total  { font-size: 17px; color: #2c5530; }

.partner-row {
  display: flex; gap: 8px; margin-top: 6px;
}
.partner-row input { margin-top: 0; }
.partner-row button {
  margin-top: 0;
  padding: 8px 12px;
}

/* 식당 URL 입력 + "링크열기" 버튼 한 줄 배치 */
.url-row {
  display: flex; gap: 8px; align-items: stretch;
  margin-top: 4px;
}
.url-row input {
  flex: 1 1 auto;
  margin-top: 0;
  min-width: 0;
}
.url-row button.url-open {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 0 14px;
  white-space: nowrap;
  font-size: 13px;
}

dl.kv { margin: 0; }
dl.kv dt { font-weight: 600; color: #555; margin-top: 8px; font-size: 13px; }
dl.kv dd { margin: 2px 0 0 0; }

.empty {
  text-align: center;
  color: #999;
  padding: 40px 16px;
}

footer.muted {
  text-align: center; padding: 24px 16px; font-size: 12px;
}

/* ----- Accordion (round form 의 선택 항목 그룹) ----- */
details.acc {
  border: 1px solid #d8dde3;
  border-radius: 6px;
  background: #fafbfc;
  margin-top: 8px;
  overflow: hidden;
}
details.acc[open] {
  background: #fff;
  border-color: #c2cfd6;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
details.acc > summary {
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: #2c5530;
  list-style: none;             /* 기본 disclosure 삼각형 제거 (Firefox) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
details.acc > summary::-webkit-details-marker {
  display: none;                /* Safari / Chrome */
}
details.acc > summary::after {
  content: "▾";
  font-size: 12px;
  color: #888;
  transition: transform 0.15s ease;
}
details.acc[open] > summary::after {
  transform: rotate(180deg);
}
details.acc > summary:hover {
  background: #eef2ed;
}
details.acc[open] > summary {
  border-bottom: 1px solid #e4e7eb;
}
.acc-body {
  padding: 12px 14px 16px;
}
.acc-body label:first-child {
  margin-top: 0;
}

/* SMS 자동입력 textarea */
details.acc.sms-import > summary { color: #1f4673; }
details.acc.sms-import textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  min-height: 120px;
}

/* ----- 약관 동의 페이지 ----- */
.terms-list { margin-top: 16px; }
.terms-master {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #f0f5f1;
  border: 1px solid #c9dccd;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}
.terms-master input[type="checkbox"] {
  width: 18px; height: 18px; margin: 0;
}
.terms-master-title {
  font-weight: 600;
  font-size: 15px;
  color: #2c5530;
}
.terms-master-desc {
  font-size: 12px;
  margin: 6px 4px 0 4px;
  line-height: 1.5;
}
.terms-divider {
  margin: 16px 0;
  border: none;
  border-top: 1px solid #e4e7eb;
}
.terms-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 4px;
}
.terms-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex: 1 1 auto;
  font-size: 14px;
  margin-top: 0;
}
.terms-label input[type="checkbox"] {
  width: 18px; height: 18px; margin: 0;
  flex: 0 0 auto;
}
.terms-label .badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
  flex: 0 0 auto;
}
.terms-label .badge.req { background: #fde8e6; color: #962d22; }
.terms-label .badge.opt { background: #e7f1fb; color: #1f4673; }
.view-toggle {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 4px 10px;
  font-size: 12px;
  background: transparent;
  color: #2b6cb0;
  border: 1px solid #cdd2d8;
  cursor: pointer;
  border-radius: 4px;
}
.view-toggle:hover { background: #f4f6f8; }
.terms-content {
  background: #fafbfc;
  border: 1px solid #e4e7eb;
  border-radius: 5px;
  padding: 12px 14px;
  margin: 4px 4px 12px;
  font-size: 13px;
  line-height: 1.6;
  color: #333;
}
.terms-content h4 {
  margin: 0 0 8px 0;
  color: #2c5530;
  font-size: 14px;
}
.terms-content p { margin: 4px 0; }
.terms-content ul { margin: 4px 0; padding-left: 20px; }
.terms-content li { margin: 2px 0; }

/* ----- 소셜 로그인 (Kakao/Google/Naver) ----- */
.social-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 10px;
  color: #888;
  font-size: 12px;
}
.social-divider::before,
.social-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e4e7eb;
}
.social-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  margin-top: 0;
  font-family: inherit;
  text-align: center;
}
.social-btn:hover { opacity: 0.92; text-decoration: none; }
.social-btn:disabled, .social-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.social-btn .logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 14px;
}
.social-kakao  { background: #FEE500; color: #3C1E1E; }
.social-kakao  .logo { background: rgba(60, 30, 30, 0.08); }
.social-google { background: #fff; color: #1f1f1f; border-color: #d8dde3; }
.social-google .logo { background: #4285F4; color: #fff; }
.social-naver  { background: #03C75A; color: #fff; }
.social-naver  .logo { background: rgba(255,255,255,0.15); color: #fff; }

/* 미디어 그리드 */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.media-cell {
  border: 1px solid #d8dde3;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.media-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #f0f2f4;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 공개/비공개 자물쇠 뱃지 — 좌상단 (iOS / Android 와 동일 위치) */
.media-thumb .media-lock {
  position: absolute;
  top: 4px; left: 4px;
  background: rgba(255,255,255,0.92);
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
  z-index: 2;
  pointer-events: none;
}
.media-thumb .media-lock svg { display: block; }
.media-thumb .media-lock-open   { color: #2C5530; }  /* 공개 — 브랜드 초록 */
.media-thumb .media-lock-closed { color: #B11A1A; }  /* 비공개 — 빨강 (iOS lock.fill 과 동일 의도) */
.media-thumb img,
.media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-meta {
  padding: 6px 8px;
  font-size: 11px;
  color: #444;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid #eef0f2;
}
.media-meta span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.media-del {
  margin: 0;
  padding: 6px 8px;
  border: none;
  border-top: 1px solid #eef0f2;
  background: #fafbfc;
  color: #c0392b;
  font-size: 12px;
  cursor: pointer;
  border-radius: 0;
}
.media-del:hover { background: #f4e9e9; }

/* ─── FAB (+ 새 라운드) — rounds.html 우측 하단 동그라미 ─── */
.fab-new-round {
  position: fixed;
  right: 20px;
  bottom: 24px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #2c5530; color: #fff;
  border: none;
  font-size: 28px; line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 0;
}
.fab-new-round:hover    { background: #1f3f23; }
.fab-new-round:disabled { opacity: 0.5; cursor: not-allowed; }
.fab-new-round:active   { transform: scale(0.95); }