*{box-sizing:border-box}
body{font-family:system-ui,Segoe UI,Helvetica,Arial;margin:0;padding:0;background:#f3f4f6;color:#111}
/* layout */
#card-container{display:flex;align-items:center;justify-content:center;height:100vh}
.card{width:min(720px,90vw);background:#fff;padding:16px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.08);display:flex;flex-direction:column;max-height:calc(100vh - 80px)}
.nav{background:transparent;border:0;font-size:36px;cursor:pointer;padding:10px}

/* content areas: allow internal scroll when long */
.detail{white-space:pre-wrap;margin-top:8px;overflow:auto}
.comment{background:#f9fafb;padding:10px;border-radius:6px;margin-top:12px;overflow:auto;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.actions{display:flex;gap:8px;margin-top:12px}
#commentInput{flex:1;padding:8px;height:72px;resize:vertical;border-radius:4px}
#hint{text-align:center;margin-top:8px;color:#666}

/* Mobile: allow detail/metanote to scroll when content is long */
@media (max-width:600px) {
	.card{padding:12px;max-height:calc(100vh - 64px)}
	.detail{max-height:40vh}
	.comment{max-height:22vh}
}

/* Desktop: constrain sections so card doesn't overflow */
@media (min-width:601px) {
	.detail{max-height:50vh}
	.comment{max-height:18vh}
}

/* meta info line */
.metaInfo{margin-top:8px;color:#444;font-size:13px}

/* Mobile: stack actions vertically and avoid iOS zoom by using >=16px font-size */
@media (max-width:600px) {
	.actions{flex-direction:column;align-items:stretch}
	.actions button{width:100%;font-size:16px;padding:10px}
	#commentInput{font-size:16px}
}