* {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Microsoft YaHei",
    "Noto Sans CJK SC",
    sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #111;
  color: #eee;
}


header {
  text-align: center;
  padding: 60px 20px;
  background: linear-gradient(
    135deg,
    #111,
    #263238
  );
}


header h1 {
  font-size: 42px;
  margin: 0;
}


header p {
  font-size: 18px;
  color: #bbb;
}


main {
  max-width: 1100px;
  margin: auto;
  padding: 40px 20px;
}


.intro {
  margin-bottom: 40px;
}


#museum {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(280px, 1fr)
  );
  gap: 25px;
}


.card {

  background: white;

  border-radius: 22px;

  padding: 20px;

  border: 1px solid #e5e5e5;

  overflow: hidden;

  transition:
  transform 0.3s ease,
  box-shadow 0.3s ease;

  color:#111;

}


.card:hover {

  transform: translateY(-8px);

  box-shadow:
  0 20px 40px rgba(0,0,0,0.12);

}


.card h3 {
  margin-top: 0;
  color: #fff;
}


.card p {
  color: #bbb;
  line-height: 1.6;
}


.tag {

display:inline-block;

background:#f5f5f7;

color:#333;

padding:6px 14px;

border-radius:999px;

font-size:13px;

margin-bottom:12px;

}
.menubar {

  min-height: 48px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:0 32px;

  border-bottom:1px solid #ddd;

  background:white;

}


.brand {
  white-space: nowrap;
  
  font-size: 15px;

  font-weight: 600;

}


.menubar nav {

  display:flex;

  gap:18px;

  align-items:center;

  white-space:nowrap;

}


.menubar a {

  text-decoration: none;

  color: #333;

  font-size: 14px;

  padding: 5px 12px;

  border-radius: 6px;

  transition: background 0.2s ease;

}


.menubar a:hover {

  background: #f2f2f2;

}

.menubar {

  position: sticky;

  top: 0;

  z-index: 100;

}

.welcome {

  text-align: center;

  padding: 90px 20px 70px;

}


.welcome h1 {

  font-size: 48px;

  font-weight: 700;

  margin-bottom: 20px;

}


.welcome p {

  font-size: 18px;

  color: #666;

  line-height: 1.8;

}

.enter-btn {

  display: inline-block;

  margin-top: 30px;

  padding: 12px 28px;

  background: #111;

  color: white;

  text-decoration: none;

  border-radius: 999px;

  font-size: 15px;

}


.enter-btn:hover {

  opacity: 0.8;

}

.gallery {

  padding: 50px 40px;

}


.gallery h2 {

  text-align: center;

  font-size: 32px;

}


.gallery-desc {

  text-align: center;

  color: #666;

  margin-bottom: 40px;

}


.museum-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  gap: 30px;

}

.preview-area {

  width: 90%;

  max-width: 600px;

  height: 400px;

  margin: 30px auto;

  display: flex;

  justify-content: center;

  align-items: center;

  overflow: hidden;

  border: 1px solid #ddd;

  border-radius: 12px;

}


.preview-area img {

  max-width: 100%;

  max-height: 100%;

  object-fit: contain;

}

.submit-form {

  max-width: 500px;

  margin: 40px auto;

  display: flex;

  flex-direction: column;

  gap: 12px;

}


.submit-form input,
.submit-form textarea {

  padding: 12px;

  border: 1px solid #ddd;

  border-radius: 8px;

  font-size: 15px;

}


.submit-form textarea {

  height: 120px;

  resize: vertical;

}


.submit-form button {

  margin-top: 20px;

  padding: 12px;

  border: none;

  border-radius: 999px;

  background: #111;

  color: white;

  cursor: pointer;

}

.ticket-image {

width:100%;

height:240px;

object-fit:contain;

background:#fafafa;

border-radius:16px;

margin-bottom:15px;

}

.privacy-warning {
    padding: 15px;
    margin: 20px 0;
    border-radius: 12px;
    background: #f5f5f7;
    font-size: 14px;
}

.edit-panel{

display:none;

padding:20px;

margin:20px;

border-radius:15px;

background:#f5f5f7;

}

.edit-panel{

display:none;

padding:20px;

margin:20px auto;

max-width:600px;

border-radius:15px;

background:#f5f5f7;

}


.edit-panel input,
.edit-panel textarea{

display:block;

width:100%;

margin:10px 0;

padding:10px;

border-radius:8px;

border:1px solid #ddd;

font-size:16px;

}


.edit-panel textarea{

height:120px;

}

.detail-card{

max-width:800px;

margin:50px auto;

background:white;

color:#111;

border-radius:25px;

padding:35px;

box-shadow:
0 20px 50px rgba(0,0,0,0.12);

}


.detail-card h1{

font-size:42px;

margin:20px 0;

}


.detail-card p{

font-size:17px;

line-height:1.8;

color:#555;

}

.search-box{

text-align:center;

margin:30px auto;

}


.search-box input{

width:80%;

max-width:500px;

padding:14px 20px;

border-radius:999px;

border:1px solid #ddd;

font-size:16px;

outline:none;

}

.preview-area {
    max-width: 900px;
    overflow:auto;
}


#watermarkCanvas {

    max-width:100%;

    height:auto;

    display:block;

}

/* =================================
   更新日志弹窗
================================= */


#noticeOverlay {


position: fixed;

top:0;

left:0;

width:100%;

height:100%;


background:rgba(0,0,0,0.45);


display:flex;

align-items:center;

justify-content:center;


z-index:9999;


}



#noticeBox {


width:420px;

max-width:90%;


background:white;


border-radius:18px;


padding:30px;


box-shadow:
0 20px 50px rgba(0,0,0,0.25);


font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Microsoft YaHei",
sans-serif;


animation:
noticeShow 0.25s ease;


}



#noticeBox h2 {


margin-top:0;


font-size:24px;


}



#noticeBox h3 {


color:#666;


}



#noticeBox button {


margin-top:20px;


width:100%;


padding:12px;


border:none;


border-radius:10px;


background:#111;


color:white;


cursor:pointer;


font-size:15px;


}



#noticeBox button:hover {


opacity:0.8;


}




@keyframes noticeShow {


from{

transform:translateY(20px);

opacity:0;

}


to{

transform:translateY(0);

opacity:1;

}


}