/* theme/yourtheme/lite/app.css */
/* ========== Variables (Light) ========== */
:root{
  --brand:#25aae1; --brand-ink:#0e6e8f;
  --bg:#ffffff; --card:#ffffff; --text:#111827; --muted:#6b7280; --line:#e5e7eb;
  --shadow:0 6px 18px rgba(0,0,0,.06);
  --radius:12px; --space:12px; --space-lg:18px; --maxw:1080px;
  --tabbar-h:64px;
  --safe-top:env(safe-area-inset-top); --safe-bottom:env(safe-area-inset-bottom);
}

/* ========== Variables (Dark) ========== */
html[data-theme="dark"]{
  --bg:#0b0f17; --card:#0f1520; --text:#e5e7eb; --muted:#9ca3af; --line:#1f2937;
  --shadow:none;
}

/* ========== Reset / Base ========== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Apple SD Gothic Neo,Malgun Gothic,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ========== App Bar ========== */
.app-bar{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; gap:10px;
  height:52px; padding:0 calc(var(--space-lg) + var(--safe-top));
  background:var(--card); border-bottom:1px solid var(--line);
}
.app-title{font-weight:700; font-size:16px}
.app-actions{margin-left:auto; display:flex; gap:8px}

/* ========== Layout / Card ========== */
.container{
  max-width:var(--maxw);
  margin:12px auto;
  padding:0 var(--space);
  /* 탭바와 겹치지 않게 하단 여백 */
  padding-bottom: calc(var(--tabbar-h) + 20px + var(--safe-bottom));
}
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:14px; margin:10px 0;
}

/* ========== Controls ========== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:36px; padding:0 12px; border:1px solid var(--line);
  border-radius:10px; background:transparent; cursor:pointer
}
.btn:hover{background:rgba(0,0,0,.04)}
html[data-theme="dark"] .btn:hover{background:rgba(255,255,255,.06)}
.btn.primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn[disabled]{opacity:.55; cursor:not-allowed}

.input, select, textarea{
  width:100%; height:36px; padding:6px 10px; border:1px solid var(--line);
  border-radius:10px; background:transparent; color:var(--text)
}
textarea{min-height:86px}
.badge{
  display:inline-block; padding:4px 8px; border:1px solid var(--line);
  border-radius:999px; font-size:12px; color:var(--muted); background:transparent
}

/* iOS 스타일 스위치 */
.ios-switch{display:inline-flex; align-items:center; gap:8px; user-select:none; cursor:pointer; font-size:12px; color:var(--muted);}
.ios-switch input{display:none}
.ios-switch .track{
  position:relative; width:50px; height:28px; border-radius:999px;
  background:#cbd5e1; transition:.2s; border:1px solid var(--line);
}
html[data-theme="dark"] .ios-switch .track{background:#1f2937}
.ios-switch .thumb{
  position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%;
  background:#fff; transition:.2s; box-shadow:0 2px 4px rgba(0,0,0,.2);
}
.ios-switch input:checked + .track .thumb{transform:translateX(22px)}
.ios-switch input:checked + .track{background:var(--brand)}
.ios-switch .label .sun{margin-right:4px}
.ios-switch .label .moon{margin-left:4px}

/* ========== Tabbar (모든 화면에서 표시) ========== */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  height:var(--tabbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 8px; background:var(--card); border-top:1px solid var(--line);
}
.tab-item{
  flex:1 1 20%; min-width:64px; text-align:center; border:0; background:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  font-size:11px; color:var(--muted); text-decoration:none;
}
.tab-item i{font-size:18px; line-height:1;}
.tab-item span{display:block; line-height:1;}
.tab-item:active{opacity:.9;}
.tab-item:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
.tab-item:hover, .tab-item.active{color:var(--brand); font-weight:700}

/* 중앙 브랜드 버튼 */
.tab-item.brand{
  position:relative; top:-18px; flex:0 0 auto; width:56px; height:56px; border-radius:50%;
  background:var(--brand); color:#fff; box-shadow:0 8px 18px rgba(37,170,225,.35);
  display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:800;
  border:4px solid var(--card);
}
.tab-item.brand .brand-text{transform:translateY(1px);}

/* 다크 변형 */
html[data-theme="dark"] .tabbar{background:var(--card); border-color:var(--line);}
html[data-theme="dark"] .tab-item.brand{border-color:var(--card);}

/* ========== 브랜드 레이어(bottom sheet) ========== */
.brand-layer{position:fixed; inset:0; z-index:10000; pointer-events:none;}
.brand-backdrop{position:absolute; inset:0; background:rgba(0,0,0,0); transition:background .2s;}
.brand-sheet{
  position:absolute; left:0; right:0; bottom:0;
  transform:translateY(100%); transition:transform .25s ease-out;
  background:var(--card); border-radius:14px 14px 0 0; box-shadow:0 -16px 40px rgba(0,0,0,.25);
  max-height:78vh; overflow:auto;
}
.brand-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line);}
.brand-head strong{font-size:15px;}
.brand-close{border:0; background:none; cursor:pointer; font-size:18px; color:var(--muted);}
.brand-body{padding:16px; line-height:1.6;}
.brand-layer.active{pointer-events:auto;}
.brand-layer.active .brand-backdrop{background:rgba(0,0,0,.55);}
.brand-layer.active .brand-sheet{transform:translateY(0);}

/* ========== App Footer (모바일에서만, 탭바 위에 표시 / 스크롤 끝에서만 노출) ========== */
/* 데스크탑 기본: 별도 고정 없음 (필요 시 여기 최소 스타일만) */
.app-foot{ /* base 스타일만 두고 위치는 모바일 미디어쿼리에서 제어 */ }

@media (max-width:768px){
  .app-foot{
    position:fixed; left:0; right:0;
    bottom:calc(var(--tabbar-h) + var(--safe-bottom));
    z-index:9998;
    opacity:0; pointer-events:none; transform:translateY(8px);
    transition:opacity .18s, transform .18s;
    /* 필요 시 배경/테두리/그림자 활성화
      background: rgba(255,255,255,.96);
      border-top: 1px solid var(--line);
      box-shadow: 0 -8px 24px rgba(0,0,0,.08);
    */
  }
  html[data-theme="dark"] .app-foot{
    /* 다크 시 커스터마이즈 원하면 여기에 */
  }
  body.has-foot-visible .app-foot{
    opacity:1; pointer-events:auto; transform:translateY(0);
  }
}

/* ========== Dark: 텍스트 강제 밝게 ========== */
html[data-theme="dark"] body,
html[data-theme="dark"] :where(
  h1,h2,h3,h4,h5,h6,p,span,small,strong,em,mark,
  a,li,dt,dd,blockquote,code,pre,
  th,td,caption,label,legend,
  button,input,textarea,select
){ color:#e5e7eb !important; }

html[data-theme="dark"] a{color:#bfe9fb !important;}
html[data-theme="dark"] ::placeholder{color:#9ca3af !important; opacity:1;}
html[data-theme="dark"] svg{color:#e5e7eb;}
/* ========== Minor Responsive ========== */
@media (min-width:720px){ .tab-item{font-size:12px} }