/* ===== kafu style v3 — レスポンシブ強化 ===== */
:root {
  --bg:#F5F0E8; --paper:#EDE5D0;
  --dark:#2C1A0E; --mid:#5C3D1E; --light:#A0855A;
  --gold:#B8943E; --goldL:#D4AF6A; --red:#9B2335;
  --navy:#1a2744; --radius:8px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{
  font-family:'Noto Sans JP',sans-serif;
  background:var(--bg);color:var(--dark);
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}

/* ===== Login ===== */
#login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
}
#login-box{
  background:rgba(237,229,208,0.97);
  border:1px solid var(--gold);border-radius:16px;
  padding:44px 36px;text-align:center;
  max-width:360px;width:100%;
  box-shadow:0 8px 48px rgba(44,26,14,0.15),0 0 0 1px rgba(184,148,62,0.15);
  position:relative;z-index:1;
}
.login-mon{
  font-family:'Noto Serif JP',serif;font-size:40px;color:var(--gold);
  border:2px solid var(--gold);border-radius:50%;
  width:72px;height:72px;margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(184,148,62,0.25);
}
#login-box h1{
  font-family:'Noto Serif JP',serif;font-size:18px;font-weight:700;
  letter-spacing:4px;margin-bottom:3px;
}
.login-sub{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:12px;color:var(--light);letter-spacing:2px;margin-bottom:26px;
}
.login-form{display:flex;flex-direction:column;gap:11px;}
.login-form input[type=password]{
  padding:12px 16px;border:1px solid var(--gold)88;border-radius:8px;
  font-size:15px;background:rgba(255,255,255,0.85);color:var(--dark);
  text-align:center;outline:none;transition:all .2s;
  -webkit-appearance:none;
}
.login-form input:focus{
  border-color:var(--gold);box-shadow:0 0 0 3px var(--gold)22;
}
.login-modes{
  display:flex;gap:20px;justify-content:center;
  font-size:13px;color:var(--mid);
}
.login-modes label{display:flex;align-items:center;gap:5px;cursor:pointer;}
.login-form button{
  padding:13px;background:var(--gold);color:white;
  border:none;border-radius:8px;font-size:15px;
  cursor:pointer;letter-spacing:2px;
  font-family:'Noto Serif JP',serif;
  box-shadow:0 4px 14px rgba(184,148,62,0.35);
  transition:all .2s;-webkit-appearance:none;
}
.login-form button:active{transform:scale(0.98);}
.err{color:var(--red);font-size:13px;margin-top:5px;min-height:18px;}

/* ===== App ===== */
#app{height:100vh;height:100dvh;display:flex;flex-direction:column;}

/* ===== Header ===== */
#hdr{
  flex-shrink:0;z-index:50;
  background:rgba(30,16,6,0.95);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(184,148,62,0.25);
  safe-area-inset-top:env(safe-area-inset-top);
}
.hdr-inner{
  padding:0 16px;height:50px;
  display:flex;align-items:center;gap:10px;
  max-width:100%;overflow:hidden;
}
.hdr-title{
  display:flex;align-items:baseline;gap:8px;
  min-width:0;flex-shrink:1;overflow:hidden;
}
.ttl-ja{
  font-family:'Noto Serif JP',serif;font-size:15px;font-weight:700;
  letter-spacing:3px;color:white;white-space:nowrap;
}
.ttl-en{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:11px;color:rgba(255,255,255,0.4);letter-spacing:1px;
  white-space:nowrap;
}
.hdr-nav{
  margin-left:auto;flex-shrink:0;
  display:flex;gap:5px;align-items:center;
}
.nbtn{
  padding:5px 11px;border-radius:18px;
  border:1px solid rgba(184,148,62,0.45);
  background:transparent;color:rgba(255,255,255,0.7);
  font-size:11.5px;cursor:pointer;white-space:nowrap;
  transition:all .2s;-webkit-tap-highlight-color:transparent;
}
.nbtn:active{background:rgba(184,148,62,0.25);}
.nbtn.admin{
  background:var(--gold);color:white;
  border-color:var(--gold);font-weight:500;
}
.nbtn.zoom{padding:5px 9px;font-family:monospace;font-size:14px;}
.role-badge{
  font-size:10px;color:var(--goldL);
  border:1px solid rgba(184,148,62,0.35);border-radius:10px;
  padding:2px 8px;letter-spacing:0.5px;white-space:nowrap;
}

/* ===== Canvas ===== */
#canvas-wrap{
  flex:1;overflow:hidden;position:relative;
  cursor:grab;touch-action:none;
  -webkit-user-select:none;user-select:none;
}
#canvas-wrap:active{cursor:grabbing;}

/* ===== Detail Panel ===== */
.detail-panel{
  position:absolute;bottom:0;left:0;right:0;z-index:40;
  background:rgba(237,229,208,0.98);
  border-top:2px solid var(--gold);
  box-shadow:0 -6px 32px rgba(44,26,14,0.15);
  transform:translateY(100%);
  transition:transform .25s cubic-bezier(.22,.8,.36,1);
  max-height:55vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:env(safe-area-inset-bottom);
}
.detail-panel.open{transform:translateY(0);}
.dp-inner{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 18px;
}
.dp-avatar{
  width:56px;height:56px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:white;font-family:'Noto Serif JP',serif;
  font-size:16px;font-weight:700;overflow:hidden;
}
.dp-avatar img{width:100%;height:100%;object-fit:cover;}
.dp-info{flex:1;min-width:0;}
.dp-name{
  font-family:'Noto Serif JP',serif;font-size:17px;
  font-weight:700;letter-spacing:2px;
}
.dp-yomi{font-size:10px;color:var(--light);letter-spacing:1px;margin:3px 0;}
.dp-dates{font-size:12px;color:var(--mid);margin-top:2px;}
.dp-role{
  display:inline-block;font-size:10px;margin-top:4px;
  background:var(--gold)22;border:1px solid var(--gold)66;
  color:var(--goldL);border-radius:4px;padding:1px 7px;
}
.dp-comment{
  font-size:12px;color:var(--mid);margin-top:8px;line-height:1.8;
  border-left:3px solid var(--gold)55;padding:5px 10px;
  border-radius:0 4px 4px 0;background:rgba(255,255,255,0.4);
}
.dp-actions{display:flex;gap:6px;flex-shrink:0;align-items:flex-start;}
.dp-btn{
  padding:6px 12px;border-radius:14px;font-size:12px;cursor:pointer;
  border:1px solid var(--gold)55;background:transparent;color:var(--mid);
  transition:all .2s;-webkit-tap-highlight-color:transparent;
}
.dp-btn.close{color:var(--light);font-size:18px;padding:2px 8px;}

/* ===== Modals ===== */
.modal{
  display:none;position:fixed;inset:0;z-index:200;
  background:rgba(20,12,5,0.72);
  align-items:flex-end;justify-content:center;
  padding:0;
}
.modal.open{display:flex;}
.mbox{
  background:var(--paper);
  border:1px solid var(--gold)44;
  border-radius:16px 16px 0 0;
  padding:24px 20px calc(24px + env(safe-area-inset-bottom));
  width:100%;max-width:560px;
  max-height:88vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  box-shadow:0 -8px 40px rgba(0,0,0,0.3);
  animation:slideUp .25s cubic-bezier(.22,.8,.36,1);
}
@keyframes slideUp{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
.mtitle{
  font-family:'Noto Serif JP',serif;font-size:16px;font-weight:700;
  letter-spacing:2px;margin-bottom:18px;
  padding-bottom:12px;border-bottom:1px solid var(--gold)33;
}
.frow{margin-bottom:13px;}
.frow-half{display:flex;gap:10px;}
.frow-half>div{flex:1;}
.frow label{
  display:block;font-size:10px;color:var(--light);
  letter-spacing:1px;margin-bottom:4px;
}
.frow input,.frow select,.frow textarea{
  width:100%;padding:10px 12px;
  border:1px solid var(--gold)66;border-radius:8px;
  font-size:14px;background:rgba(255,255,255,0.75);color:var(--dark);
  outline:none;transition:all .2s;
  -webkit-appearance:none;
  font-family:'Noto Sans JP',sans-serif;
}
.frow input:focus,.frow textarea:focus,.frow select:focus{
  box-shadow:0 0 0 2px var(--gold)33;border-color:var(--gold);
}
.mactions{display:flex;gap:8px;margin-top:18px;}
.btn-p{
  flex:1;padding:12px;background:var(--gold);color:white;
  border:none;border-radius:8px;font-size:14px;cursor:pointer;
  font-family:'Noto Sans JP',sans-serif;
  -webkit-appearance:none;
}
.btn-p:active{opacity:0.85;}
.btn-s{
  flex:1;padding:12px;background:transparent;color:var(--mid);
  border:1px solid var(--gold)66;border-radius:8px;font-size:14px;cursor:pointer;
  -webkit-appearance:none;
}
.btn-d{
  padding:12px 14px;background:transparent;color:var(--red);
  border:1px solid var(--red)55;border-radius:8px;font-size:13px;cursor:pointer;
  -webkit-appearance:none;
}

/* ===== Tag chips ===== */
.tag-chips{display:flex;flex-wrap:wrap;gap:6px;}
.tag-chip{
  padding:5px 12px;border-radius:16px;
  border:1px solid var(--gold)66;background:transparent;
  color:var(--mid);font-size:12px;cursor:pointer;
  transition:all .2s;-webkit-tap-highlight-color:transparent;
}
.tag-chip.selected{background:var(--gold);color:white;border-color:var(--gold);}

/* ===== Hub ===== */
#hub{
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:40px 20px;text-align:center;
  position:relative;z-index:1;
}
#hub h1{
  font-family:'Noto Serif JP',serif;
  font-size:clamp(28px,8vw,48px);font-weight:700;
  letter-spacing:8px;margin-bottom:8px;
}
#hub .sub{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:14px;color:var(--light);letter-spacing:3px;margin-bottom:40px;
}
.hub-form{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.hub-form input{
  padding:12px 16px;border:1px solid var(--gold);border-radius:8px;
  font-size:15px;background:rgba(255,255,255,0.75);outline:none;
  width:220px;-webkit-appearance:none;
}
.hub-form button{
  padding:12px 20px;background:var(--gold);color:white;
  border:none;border-radius:8px;font-size:14px;cursor:pointer;
  -webkit-appearance:none;
}

/* ===== Hint toast ===== */
.hint-toast{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  background:rgba(44,26,14,0.6);color:white;
  font-size:10px;border-radius:20px;
  padding:5px 14px;letter-spacing:1px;white-space:nowrap;
  backdrop-filter:blur(6px);pointer-events:none;
  transition:opacity .3s;
}

/* ===== PC: モーダルを中央表示 ===== */
@media(min-width:641px){
  .modal{align-items:center;padding:20px;}
  .mbox{border-radius:12px;padding:28px;}
  .detail-panel{max-height:none;}
  .dp-inner{padding:16px 24px;}
}

/* ===== スマホ細かい調整 ===== */
@media(max-width:480px){
  .hdr-inner{height:46px;padding:0 12px;}
  .ttl-ja{font-size:13px;letter-spacing:2px;}
  .ttl-en{display:none;}
  .nbtn{padding:4px 8px;font-size:11px;}
  .role-badge{display:none;}
  .nbtn.zoom{display:none;}
  .dp-name{font-size:15px;letter-spacing:1.5px;}
  .dp-comment{font-size:11px;}
}