:root{--bg:#004ba6;--bg-2:#0a3a4b;--text:#e8f3f6;--white:#fff;--accent:#0ea5b6;--border:#0b3b4b}
*{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
html,body{height:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
body{margin:0;font-family:'Nanum Gothic','Apple SD Gothic Neo','Malgun Gothic','SamsungOne','Samsung Sharp Sans',sans-serif;background:#f8d8be;color:#000000;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body.font-small{font-size:14px}
body.font-medium{font-size:16px}
body.font-large{font-size:18px}

/* 작은 글꼴 크기 조정 */
body.font-small .main-title{font-size:22px}
body.font-small .title{font-size:20px}
body.font-small .btn{font-size:13px}
body.font-small .input{font-size:13px}
body.font-small .hint{font-size:11px}

/* 중간 글꼴 크기 (기본값) */
body.font-medium .main-title{font-size:24px}
body.font-medium .title{font-size:22px}
body.font-medium .btn{font-size:14px}
body.font-medium .input{font-size:14px}
body.font-medium .hint{font-size:12px}

/* 큰 글꼴 크기 조정 */
body.font-large .main-title{font-size:26px}
body.font-large .title{font-size:24px}
body.font-large .btn{font-size:15px}
body.font-large .input{font-size:15px}
body.font-large .hint{font-size:13px}

/* 삼성웹브라우저 호환성 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .btn {
    -webkit-border-radius: 4px;
    border-radius: 4px;
  }
  
  .input {
    -webkit-border-radius: 4px;
    border-radius: 4px;
  }
  
  .hero {
    -webkit-border-radius: 4px;
    border-radius: 4px;
  }
}

/* 삼성웹브라우저 전용 스타일 */
@supports (-webkit-appearance: none) {
  .btn {
    -webkit-appearance: none;
    background-clip: padding-box;
  }
  
  .input {
    -webkit-appearance: none;
    background-clip: padding-box;
  }
}

/* 삼성웹브라우저 클래스 기반 스타일 */
.samsung-browser .btn {
  -webkit-appearance: none !important;
  appearance: none !important;
  border-radius: 4px !important;
  -webkit-border-radius: 4px !important;
}

.samsung-browser .input {
  -webkit-appearance: none !important;
  appearance: none !important;
  border-radius: 4px !important;
  -webkit-border-radius: 4px !important;
}

.samsung-browser .hero {
  border-radius: 4px !important;
  -webkit-border-radius: 4px !important;
}

.samsung-browser .container {
  border-radius: 4px !important;
  -webkit-border-radius: 4px !important;
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

.hero{max-width:720px;margin:0 auto 0;background:var(--bg);border:2px solid var(--border);padding:10px 0;border-radius:4px}
.kicker{font-size:18px;font-weight:700;color:#e8503a;margin:4px 0}
.main-title{font-size:24px;font-weight:700;text-align:center;margin:6px 0 4px;color:#ffffff}
.title{font-weight:700;font-size:22px}
.subtitle{margin-top:6px;font-weight:600}

.container{max-width:720px;margin:12px auto;padding:0}
form{background:var(--bg);border:2px solid var(--border);padding:14px;border-radius:4px}
.input{width:100%;padding:12px;border-radius:4px;border:1px solid var(--border);background:#ffffff;color:#000000;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;font-size:inherit;font-family:inherit}
.input:focus{border-color:#0ea5b6;box-shadow:0 0 0 2px rgba(14,165,182,0.2);-webkit-box-shadow:0 0 0 2px rgba(14,165,182,0.2)}
textarea.input{resize:vertical;min-height:60px}
.textarea-wrapper{position:relative}
.fake-placeholder{position:absolute;top:12px;left:12px;right:12px;color:#888;pointer-events:none;z-index:1;line-height:1.4}
.textarea-wrapper textarea:focus + .fake-placeholder,
.textarea-wrapper textarea:not(:placeholder-shown) + .fake-placeholder{display:none}
.actions{display:flex;display:-webkit-flex;display:-ms-flexbox;gap:8px;margin:5px 0;-webkit-flex-wrap:wrap;flex-wrap:wrap}
.btn{appearance:none;-webkit-appearance:none;-moz-appearance:none;border:1px solid var(--border);background:var(--bg-2);color:var(--white);padding:5px 14px;border-radius:4px;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
.btn:hover{filter:brightness(1.05);-webkit-filter:brightness(1.05)}
.btn:active{transform:scale(0.98);-webkit-transform:scale(0.98)}
.btn.primary{background:#e89050;border-color:#d07a3a}
.btn.secondary{background:#e89050;border-color:#d07a3a}
.btn.share{background:#e89050;border-color:#d07a3a;color:#ffffff}
.submit-buttons{display:flex;display:-webkit-flex;display:-ms-flexbox;gap:8px;margin:7px 0 0;-webkit-flex-wrap:wrap;flex-wrap:wrap}
.submit-buttons .btn{-webkit-flex:1;flex:1;-ms-flex:1}
.button-row{display:flex;display:-webkit-flex;display:-ms-flexbox;gap:4px;margin-bottom:6px;-webkit-flex-wrap:wrap;flex-wrap:wrap}
.button-row .btn{-webkit-flex:1;flex:1;-ms-flex:1}
.hint{font-size:12px;color:#c9e3ea;margin:6px 0 0}
.previews{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.preview{position:relative;border:1px solid var(--border);border-radius:4px;overflow:hidden;background:#09323f}
.preview img{display:block;max-width:160px;max-height:120px}
.area-row{display:flex;gap:8px;margin:6px 0}
.map-dialog{border:0;padding:0;background:transparent}
.map{width:min(92vw,720px);height:60vh;border:3px solid var(--border)}
.map-toolbar{display:flex;gap:8px;justify-content:flex-end;max-width:min(92vw,720px);margin:8px auto 0}

/* 동감 배지 - 챗풍선 스타일 (아주 옅은 대비) */
.like-badge{
  display:inline-block;
  padding:2px 8px;
  font-size:11px;
  color:#e6f2f6;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:14px;
}
.like-badge::after{
  content:'';
  display:inline-block;
  margin-left:6px;
  width:0;height:0;
  border-left:6px solid rgba(255,255,255,0.15);
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  vertical-align:middle;
}

@media (max-width:480px){
  .title{font-size:18px}
}

.share-bar{position:fixed;left:0;right:0;bottom:0;padding:10px;display:flex;justify-content:center;background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(11,47,59,0.85) 35%)}

/* 댓글 모달 스타일 */
.comment-modal{border:0;padding:0;background:transparent;max-width:80vw !important;max-height:70vh !important}
.modal-content{
  background:var(--bg);
  border:2px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  display:flex; 
  flex-direction:column;
  color:var(--text);
  max-width:80vw !important;
  max-height:70vh !important;
}
.modal-header{
  display:flex; 
  justify-content:space-between; 
  align-items:center;
  padding:12px 16px; 
  border-bottom:1px solid var(--border);
}
.modal-header h3{ 
  margin:0; 
  font-size:18px; 
  color:var(--text); 
}
.close-btn{
  background:none; 
  border:none; 
  color:var(--text); 
  opacity:.8;
  font-size:24px; 
  cursor:pointer; 
  width:30px; 
  height:30px;
  display:flex; 
  align-items:center; 
  justify-content:center;
}
.post-content{ 
  padding:12px 16px; 
  border-bottom:1px solid var(--border); 
  background:var(--bg-2); 
}
.comments-list{ 
  flex:1; 
  padding:12px 16px; 
  overflow-y:auto; 
  max-height:300px; 
  background:var(--bg);
}
.comment-item{ 
  padding:8px 0; 
  border-bottom:1px solid var(--border); 
  margin-bottom:8px; 
}
.comment-item:last-child{ 
  border-bottom:none; 
  margin-bottom:0; 
}
.comment-text{ 
  white-space:pre-wrap; 
  margin-bottom:4px; 
  color:var(--text); 
}
.comment-meta{ 
  font-size:11px; 
  color:#cbd5e1; 
}
.comment-input{ 
  padding:12px 16px; 
  border-top:1px solid var(--border); 
  background:var(--bg); 
}
.comment-input textarea{
  width:100%; 
  padding:8px;
  border:1px solid var(--border); 
  border-radius:4px;
  background:var(--bg); 
  color:var(--text);
  resize:vertical; 
  margin-bottom:8px;
}
.comment-input .btn{ 
  width:100%; 
}

/* iOS Safari 개선 */
@supports (-webkit-touch-callout: none) {
  html, body { height: 100%; }
  input, textarea, select, button { font-size: 16px; } // 입력 확대 방지
  body { padding-bottom: env(safe-area-inset-bottom); }
  .share-bar { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}

/* 고정 요소 튐 완화 */
@media (max-width: 820px) {
  .share-bar { position: sticky; bottom: 0; }
}

/* 스크롤 성능 향상 */
* { -webkit-overflow-scrolling: touch; }