/* =========================================================
  Common
  - 전 페이지 공통 스타일
========================================================= */

/* ---- Base ---- */
*{
  box-sizing:border-box;
}

body{
  font-family:Arial,sans-serif;
  margin:0;
  color:#1F2933;
  background:#fff;
}

.wrap{
  max-width:980px;
  margin:0 auto;
  padding-bottom:80px;
}

#app{
  margin:0 24px 24px;
}

a{
  color:inherit;
  text-decoration:none;
}

/* ---- Typography ---- */
h1{
  font-size:20px;
  margin:0 0 14px;
}

.tRight{
  text-align:right;
}

/* ---- Layout helpers ---- */
.row{
  display:flex;
  gap:8px;
  align-items:center;
}

.divider{
  height:1px;
  background:#E5E7EB;
  margin:12px 0;
}

.muted{
  color:#6B7280;
  font-size:12px;
}

/* ---- Form ---- */
input[type="text"],
input[type="number"],
input[type="date"]{
  flex:1;
  padding:12px 14px;
  font-size:16px;
  border:1px solid #D1D5DB;
  border-radius:10px;
}

textarea{
  width:100%;
  padding:12px 14px;
  font-size:14px;
  border:1px solid #D1D5DB;
  border-radius:10px;
  min-height:90px;
}

select,
.smallInput{
  padding:12px 14px;
  font-size:16px;
  border:1px solid #D1D5DB;
  border-radius:10px;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%2322C55E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px 16px;
  padding-right:44px;
}

.smallInput{
  width:260px;
}

/* ---- Button ---- */
button{
  padding:12px 14px;
  font-size:14px;
  color:#1F2933;
  cursor:pointer;
  border:1px solid #D1D5DB;
  border-radius:10px;
  background:#fff;
}

button:disabled{
  opacity:.5;
  cursor:not-allowed;
}

a.btnPrimary{
  padding:12px 14px;
  font-size:14px;
  text-align:center;
  color:#fff;
  cursor:pointer;
  border:1px solid #22C55E;
  border-radius:10px;
  background:#22C55E;
}

.btnPrimary{
  border-color:#22C55E;
  background:#22C55E;
  color:#fff;
}

.btnPrimary:hover{
  background:#16A34A;
  border-color:#16A34A;
}

.btnPrimary:active{
  background:#15803D;
  border-color:#15803D;
}

.btnDanger{
  border-color:#b00020;
  color:#b00020;
}

.btnLike{
  padding:12px 14px;
  font-size:14px;
  border:1px solid #D1D5DB;
  border-radius:10px;
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.btnLike.btnPrimary{
  border-color:#22C55E;
  background:#22C55E;
  color:#fff;
}

.btnLike.btnPrimary:hover{
  background:#16A34A;
  border-color:#16A34A;
}

.btnLike.btnPrimary:active{
  background:#15803D;
  border-color:#15803D;
}

/* ---- Text blocks ---- */
.meta{
  margin-top:10px;
  color:#6B7280;
  font-size:13px;
}

.error{
  color:#b00020;
  white-space:pre-wrap;
  margin-top:10px;
}

.count{
  font-size:12px;
  color:#6B7280;
  margin-top:6px;
}

.miniLabel{
  font-size:12px;
  color:#6B7280;
  margin:6px 0;
}

/* ---- Panel ---- */
.panel{
  margin-top:14px;
  padding:14px;
  border:1px solid #E5E7EB;
  border-radius:14px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.panelTitle{
  overflow-wrap: break-word;
  word-break: break-word;
  font-weight:700;
  margin-bottom:10px;
}

/* ---- Toolbar ---- */
.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
  align-items:center;
}

.toolbar .group{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.toolbar label{
  font-size:13px;
  color:#444;
  display:flex;
  gap:6px;
  align-items:center;
}

/* ---- Grid / Columns ---- */
.twoCol{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.col{
  flex:1;
  min-width:320px;
}

.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

/* ---- Chips ---- */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.chip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  border:1px solid #D1D5DB;
  border-radius:14px;
  padding:12px;

  background:#F9FAFB;
  font-size:14px;
  color:#1F2933;

  user-select:none;
  width:100%;
}

.chip:hover{
  background:#F3F4F6;
}

.chipLeft{
  display:flex;
  gap:10px;
  align-items:center;
  min-width:0;
}

.avatar{
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid #D1D5DB;
  background:#fff;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:18px;
  flex:0 0 auto;
}

.chipText{
  min-width:0;
}

.chipText .kw{
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.chipText .sub{
  color:#666;
  font-size:12px;
  margin-top:4px;
}

.chipRight{
  display:flex;
  gap:8px;
  align-items:center;
  flex:0 0 auto;
}

.pill{
  border:1px solid #D1D5DB;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  background:#fff;
  color:#222;
}

/* ---- Tags (hashtag list) ---- */
.tagList{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.tag{
  padding:10px 12px;
  font-size:14px;
  border:1px solid #D1D5DB;
  border-radius:999px;
  background:#fff;
  cursor:pointer;
  white-space:nowrap;
}

.tag:hover{
  background:#F0FDF4;
  border-color:#22C55E;
}

/* ---- Topbar / Header ---- */
.topbar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  padding: 10px 24px;
}

.topbar.is-stuck{
  border-bottom: 1px solid #eee;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.headerTitleWrap{
  display:flex;
  align-items:center;
}

#headerTitle{
  font-size:18px;
  margin:0;
}

#headerActions{
  display:flex;
  gap:8px;
  align-items:stretch;
  flex-wrap:wrap;
}

/* title row (back + title) */
.headerTitleRow{
  display:flex;
  align-items:center;
  gap:8px;
}

.headerTitleText{
  font-size:18px;
  font-weight:700;
}

/* back button */
.btnBack{
  width:36px;
  height:36px;
  padding:0;
  color:#16A34A;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid #E5E7EB;
  border-radius:12px;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  cursor:pointer;
}

.btnBack:hover{
  background:#F0FDF4;
  border-color:#22C55E;
}

.iconBack{
  width:20px;
  height:20px;
  display:block;
}

.btnBack,
.btnBack .iconBack{
  color:#1F2933;
}

.btnBack:hover,
.btnBack:hover .iconBack{
  color:#16A34A;
}

.btnBack:active,
.btnBack:active .iconBack{
  color:#15803D;
}

/* ---- Toast ---- */
.toastWrap{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:9999;

  display:flex;
  flex-direction:column;
  gap:8px;

  pointer-events:none;
}

.toast{
  padding:10px 14px;
  border:1px solid #D1D5DB;
  border-radius:999px;
  background:#fff;
  font-size:13px;
  color:#1F2933;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* ---- Water button ---- */
.btnWater{
  padding:12px 14px;
  font-size:14px;
  border-radius:10px;
}

.btnWater.isDue{
  border-color:#111;
}

.btnWater.isEarly{
  opacity:.55;
}

.btnWater.isEarly:disabled{
  opacity:.55;
  cursor:pointer; /* disabled지만 클릭 감지용 */
}

.btnWater.isOverdue{
  border-color:#b00020;
  color:#b00020;
}

/* ---- Responsive ---- */
@media (max-width:720px){
  #app{
    margin:0 16px 16px;
  }

.topbar{
  padding: 10px 16px;
}

  .grid2{
    grid-template-columns:1fr;
  }

  .smallInput{
    width:100%;
  }

  .chip{
    padding:12px;
  }
}

/* ---- Bottom navigation ---- */
.bottomNav .navIcon,
.bottomNav .navLabel{
  display:block;
}

.bottomNav{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);

  width:100%;
  max-width:980px;

  display:flex;
  justify-content:space-around;
  gap:8px;

  padding:10px 12px;
  border-top:1px solid #E5E7EB;
  background:#fff;
}

.bottomNav > a{
  flex:1;
  text-align:center;
  padding:10px 12px;
  border-radius:12px;
  font-size:12px;
  color:#777;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}

.bottomNav a .navIcon{
  font-size:15px;
  line-height:1;
}

.bottomNav a .navLabel{
  margin-top:3px;
  font-size:10px;
  line-height:1.1;
}

.bottomNav a.isActive{
  color:#16A34A;
  border:1px solid #22C55E;
  background:#F0FDF4;
}

.bottomNav .navIcon{
  width:22px;
  height:22px;
  display:block;
}

/* ---------- Topbar Sync Spinner ---------- */
.syncSpinner{
  width: 22px;
  height: 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right: 6px;
}

.syncSpinner .dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #D1D5DB;
  border-top-color: #22C55E;
  animation: spin 0.7s linear infinite;
}

@keyframes spin{
  to{ transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
  .syncSpinner .dot{ animation: none; }
}

input,
select,
textarea{
  -webkit-appearance:none;
  appearance:none;
}

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:#22C55E;
  box-shadow:0 0 0 3px rgba(34,197,94,0.18);
}

input[type="date"]{
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' ry='2' fill='none' stroke='%2322C55E' stroke-width='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18' fill='none' stroke='%2322C55E' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:18px 18px;
  padding-right:44px;
}

input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:0;
  position:absolute;
  right:0;
  width:44px;
  height:100%;
  cursor:pointer;
}

input[type="date"]::-webkit-datetime-edit{
  color:#1F2933;
}

input[type="date"]::-webkit-date-and-time-value{
  text-align:left;
}

input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field{
  text-align:left;
}

input::placeholder,
textarea::placeholder{
  color:#9CA3AF;
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="password"],
textarea,
select{
  width:100%;
  font-size:16px;
  color:#1F2933;
}






/* ---------- Intro Popup ---------- */
.introPopupOverlay{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(17,24,39,.56);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.introPopupCard{
  width:min(100%, 560px);
  max-height:min(88vh, 760px);
  overflow:auto;
  background:#fff;
  border:1px solid #E5E7EB;
  border-radius:22px;
  padding:20px;
  box-shadow:0 20px 40px rgba(0,0,0,.12);
}

.introPopupTitle{
  font-size:22px;
  font-weight:800;
  color:#1F2933;
  line-height:1.35;
}

.introPopupBody{
  margin-top:14px;
  color:#1F2933;
  font-size:15px;
  line-height:1.75;
}

.introPopupBody p{
  margin:0 0 14px;
}

.introPopupSectionTitle{
  margin-top:8px;
  margin-bottom:8px;
  font-size:14px;
  font-weight:700;
  color:#16A34A;
}

.introPopupList{
  margin:0;
  padding-left:18px;
  color:#1F2933;
}

.introPopupList li{
  margin:0 0 8px;
}

.introPopupFoot{
  margin-top:14px;
  color:#6B7280;
}

.introPopupActions{
  margin-top:18px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

@media (max-width: 640px){
  .introPopupCard{
    padding:18px 16px;
    border-radius:18px;
  }

  .introPopupTitle{
    font-size:20px;
  }

  .introPopupBody{
    font-size:14px;
  }

  .introPopupActions{
    flex-direction:column-reverse;
  }

  .introPopupActions button{
    width:100%;
  }
}