body { background-color: #f0ebf8; font-family: sans-serif; display: flex; justify-content: center;}
body.waiting, body.waiting * { cursor: wait !important; }

input, select { width: 100%; border: none; border-bottom: 1px solid #ddd; padding: 8px 0; outline: none; margin-bottom: 15px; }
input.error { width: 100%; border: none; border-bottom: 1px solid #f00; background-color: #fdd; padding: 8px 0; outline: none; margin-bottom: 15px; }
input:focus { border-bottom: 2px solid #673ab7; }

.container { width: 100%; max-width: 640px;}
.card { background: white; border-radius: 8px; padding: 24px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
        border-top: 1px solid #dadce0; }
.header-card { border-top: 10px solid #673ab7; }
.tail-card { position: relative; background: white; border-radius: 12px; padding: 20px; overflow: hidden; z-index: 1; 
             min-height:120px; display: flex; flex-direction: column;}
.tail-card::after { content: "";   position: absolute; bottom: -10px; right: -10px; width: 150px;  height: 150px; 
                      background-image: url('/images/kami.png'); 
                      background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.12; 
                      z-index: -1; pointer-events: none; }
.q-title { font-weight: bold; margin-bottom: 10px; display: block; font-size: 16px; }
.i-title { font-weight: bold; margin-bottom: 2px; display: block; font-size: 12px; }
.member-entry { border: 1px dashed #ccc; padding: 15px; margin-bottom: 10px; border-radius: 5px; position: relative; }
.btn { padding: 8px 16px; border-radius: 4px; cursor: pointer; border: none; font-weight: bold; }
.btn-add { background: #e8f0fe; color: #1a73e8; margin-bottom: 20px; }
.btn-submit { background-color: #673ab7; color: white; border: none; padding: 12px 24px; 
              width: 200px; margin-top: auto; border-radius: 4px; cursor: pointer; font-weight: 500; 
              transition: background-color 0.3s, opacity 0.3s;}
.btn-submit:disabled { background-color: #e0e0e0; color: #9e9e9e; cursor: not-allowed; box-shadow: none; opacity: 0.7; }
.btn-submit:hover:not(:disabled) { background-color: #875ac7; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.checkbox-container { display: grid; grid-template-columns: repeat(2, 1fr);  gap: 10px 20px; max-width: 600px; }
.checkbox-item { display: flex; align-items: center; white-space: nowrap; cursor: pointer; flex-shrink: 0; font-size: 12px;}
.checkbox-item input { flex-shrink: 0; margin: 0 8px 0 0; width: 14px; height: 14px; }
.remove-btn { line-height: 1; white-space: nowrap; color: red; cursor: pointer; font-size: 12px; text-align: right;}
.dup-msg { line-height: 1; white-space: nowrap; color: orange; font-size: 12px; text-align: right;}
.hidden { display: none; }
.placeholder { font-size: 12px; color: #999; }