*{box-sizing:border-box; margin:0; padding:0;}
  :root{
    --pink:#ff7ab5; --pink-deep:#ff5fa6; --pink-soft:#ffd9ec;
    --purple:#caa9f0; --ink:#7a5d6c; --card:#ffffff;
  }
  body{
    font-family:"Hiragino Maru Gothic ProN","Hiragino Maru Gothic Pro",sans-serif;
    color:var(--ink); min-height:100vh; padding:0 0 60px;
    background:
      radial-gradient(150px 150px at 18% 22%, rgba(255,255,255,.9), transparent 70%),
      radial-gradient(200px 200px at 82% 14%, rgba(255,255,255,.85), transparent 70%),
      radial-gradient(170px 170px at 70% 40%, rgba(255,255,255,.8), transparent 70%),
      radial-gradient(140px 140px at 25% 60%, rgba(255,255,255,.8), transparent 70%),
      radial-gradient(190px 190px at 88% 72%, rgba(255,255,255,.85), transparent 70%),
      radial-gradient(160px 160px at 12% 85%, rgba(255,255,255,.8), transparent 70%),
      linear-gradient(165deg, #f7d6f0 0%, #e6cdf5 45%, #f9d4ec 100%);
    background-attachment:fixed;
  }
  .wrap{max-width:480px; margin:0 auto; padding:36px 20px 0;}

  /* プロフィール */
  .profile{text-align:center; margin-bottom:26px;}
  .avatar{
    width:150px; height:150px; border-radius:50%; margin:0 auto 16px;
    background:linear-gradient(150deg,#ffd0e6,#e3cdf5);
    display:flex; align-items:center; justify-content:center;
    font-size:54px; box-shadow:0 8px 22px rgba(190,140,190,.35);
    border:5px solid #fff; position:relative;
  }
  .avatar .badge{
    position:absolute; right:6px; bottom:6px; width:34px; height:34px; border-radius:50%;
    background:#4fd1c5; color:#fff; font-size:18px; display:flex; align-items:center; justify-content:center;
    border:3px solid #fff;
  }
  .pname{font-size:30px; font-weight:800; color:var(--pink-deep); letter-spacing:.02em;}
  .ptitle{font-size:17px; color:#b98bb0; margin-top:4px; font-weight:700;}
  .socials{display:flex; gap:16px; justify-content:center; margin-top:16px;}
  .socials a{
    width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:800; color:#fff; text-decoration:none; box-shadow:0 5px 14px rgba(190,140,190,.3);
  }
  .ic-line, .ic-x{background-repeat:no-repeat; background-position:center; font-size:0;}
  .ic-line{background-color:#06c755; background-image:url(icon-line.svg); background-size:60%;}
  .ic-x{background-color:#111; background-image:url(icon-x.svg); background-size:46%;}
  .avemoji{font-size:54px; line-height:1;}
  #avatar{background-size:cover; background-position:center;}
  .avedit{display:none; flex-direction:column; gap:8px; align-items:center; margin-top:16px;}
  body.editing .avedit{display:flex;}
  .avedit .row{display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap;}
  .avedit input[type=text]{font-family:inherit; font-size:18px; width:110px; text-align:center; border:2px solid #ffd9ec; border-radius:10px; padding:6px 10px; outline:none;}
  .avedit .btn{background:#ffe3f0; color:#e8569a; border:none; font-family:inherit; font-weight:800; font-size:13px; padding:9px 16px; border-radius:999px; cursor:pointer;}
  .avedit .hint{font-size:11px; color:#b08aa0;}

  /* 写真トリミング（丸型・パン&ズーム）モーダル */
  .cropper-overlay{
    position:fixed; inset:0; background:rgba(60,40,55,.78); z-index:50;
    display:flex; align-items:center; justify-content:center; padding:18px;
  }
  .cropper-box{
    background:#fff; border-radius:24px; padding:20px; max-width:360px; width:100%;
    box-shadow:0 18px 50px rgba(120,70,110,.4);
  }
  .cropper-box h3{font-size:17px; color:var(--pink-deep); text-align:center; margin-bottom:4px; font-weight:800;}
  .cropper-box .sub{font-size:12px; color:#b08aa0; text-align:center; margin-bottom:14px;}
  .cropper-stage-wrap{display:flex; justify-content:center;}
  .cropper-stage{touch-action:none; border-radius:14px; background:#f3ecef; cursor:grab; display:block; user-select:none; -webkit-user-select:none;}
  .cropper-stage:active{cursor:grabbing;}
  .cropper-zoom{display:flex; align-items:center; gap:10px; margin:16px 2px 2px;}
  .cropper-zoom input[type=range]{flex:1; accent-color:#ff7ab5;}
  .cropper-zoom span{font-size:16px;}
  .cropper-actions{display:flex; gap:10px; margin-top:14px;}
  .cropper-actions button{flex:1; border:none; font-family:inherit; font-weight:800; font-size:15px; padding:12px; border-radius:12px; cursor:pointer;}
  .cropper-cancel{background:#f0e6ee; color:#9a7a8c;}
  .cropper-ok{background:linear-gradient(135deg,#ff9ec6,#ff6fae); color:#fff;}

  /* 保存結果トースト */
  #saveToast{
    position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
    color:#fff; font-weight:800; font-size:14px; padding:11px 22px; border-radius:999px;
    opacity:0; pointer-events:none; transition:.25s; z-index:60; box-shadow:0 6px 18px rgba(0,0,0,.2);
  }
  #saveToast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  /* 姫予約 おすすめ強調 */
  .hime{
    background:linear-gradient(135deg,#ff9ec6,#ff6fae); color:#fff; border-radius:20px;
    padding:20px 18px; text-align:center; margin:6px 0 16px; position:relative;
    box-shadow:0 8px 20px rgba(255,110,170,.35);
  }
  .hime-badge{
    position:absolute; top:-12px; left:50%; transform:translateX(-50%);
    background:#fff; color:#ff5fa6; font-size:13px; font-weight:800; padding:5px 16px;
    border-radius:999px; box-shadow:0 3px 8px rgba(0,0,0,.12); white-space:nowrap;
  }
  .hime-title{font-size:30px; font-weight:900; letter-spacing:.08em; margin-top:8px; text-shadow:0 2px 6px rgba(0,0,0,.12);}
  .hime-perk{font-size:17px; font-weight:800; margin-top:8px;}
  .hime-sub{font-size:13.5px; font-weight:700; margin-top:5px; letter-spacing:-.01em; opacity:.97;}

  /* プレビュー切替ボタン（編集ページのみ） */
  .previewbtn{
    position:fixed; right:16px; bottom:18px; z-index:40; border:none;
    background:#3a93e0; color:#fff; font-family:inherit; font-weight:800; font-size:14px;
    padding:13px 20px; border-radius:999px; box-shadow:0 8px 20px rgba(58,147,224,.4); cursor:pointer;
  }
  .previewbtn.on{background:#ff7ab5;}

  /* カード共通 */
  .card{
    background:var(--card); border-radius:26px; padding:24px 22px; margin-bottom:18px;
    box-shadow:0 8px 22px rgba(190,140,190,.20);
  }
  .card h2{font-size:21px; color:var(--pink-deep); margin-bottom:14px; letter-spacing:.01em;}
  .card p{font-size:15px; line-height:1.85; color:#9a7a8c; margin-bottom:10px;}
  .card p:last-child{margin-bottom:0;}
  .card .em{color:var(--pink-deep); font-weight:700;}
  .note{font-size:14px; color:#b08aa0; line-height:1.8;}

  .timepill{
    display:inline-block; background:linear-gradient(135deg,#ff9ec6,#ff7aae); color:#fff;
    font-weight:800; font-size:16px; padding:9px 22px; border-radius:999px; margin-bottom:8px;
  }

  /* 生きたカレンダー */
  .callegend{display:flex; flex-wrap:wrap; gap:12px; margin:8px 0 14px;}
  .callegend .lg{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:800; color:#8a6b7a;}
  .callegend .lg i{width:14px; height:14px; border-radius:5px; display:inline-block;}
  .cal-month{margin-bottom:18px;}
  .cal-month h3{font-size:17px; color:#ee6fa3; margin:0 0 8px;}
  .cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:5px;}
  .cal-grid .wd{font-size:11px; font-weight:800; text-align:center; padding:2px 0 4px; color:#b09aa6;}
  .cal-grid .wd.sun{color:#ff7a9a;} .cal-grid .wd.sat{color:#7aa6e0;}
  .cal-cell{
    aspect-ratio:1/1; border-radius:11px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; background:#fff6fa; border:2px solid #ffeef5;
  }
  .cal-cell.empty{background:transparent; border:none;}
  .cal-cell .dn{font-size:15px; font-weight:700; line-height:1;}
  .cal-cell .rm{font-size:9.5px; font-weight:800; margin-top:3px; line-height:1;}
  body.editing .cal-cell{cursor:pointer;}
  body.editing .cal-cell:active{transform:scale(.94);}

  /* 予約フォーマット */
  ul.fmt{list-style:none; margin:6px 0 0;}
  ul.fmt li{font-size:15px; color:#9a7a8c; padding:5px 0 5px 20px; position:relative;}
  ul.fmt li::before{content:"・"; position:absolute; left:0; color:var(--pink);}

  /* リンクボタン */
  .linkbtn{
    display:flex; align-items:center; gap:16px; background:var(--card); border-radius:22px;
    padding:16px 18px; margin-bottom:14px; text-decoration:none; color:inherit;
    box-shadow:0 6px 18px rgba(190,140,190,.18); transition:transform .15s, box-shadow .15s;
  }
  .linkbtn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(190,140,190,.28);}
  .linkbtn .lico{
    width:58px; height:58px; border-radius:16px; flex:none; display:flex; align-items:center; justify-content:center;
    font-size:15px; font-weight:800; color:#fff;
  }
  .lico.line, .lico.x, .lico.ig{background-repeat:no-repeat; background-position:center; font-size:0;}
  .lico.line{background-color:#06c755; background-image:url(icon-line.svg); background-size:58%;}
  .lico.x{background-color:#111; background-image:url(icon-x.svg); background-size:46%;}
  .lico.ig{background-image:url(icon-instagram.svg), linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7); background-size:54%, cover; background-position:center, center; background-repeat:no-repeat, no-repeat;}
  .lico.hp{background:linear-gradient(135deg,#ff9ec6,#ff7aae);}
  .linkbtn .ltxt b{display:block; font-size:18px; color:var(--pink-deep); margin-bottom:3px;}
  .linkbtn .ltxt span{font-size:13.5px; color:#a98aa0; line-height:1.5;}

  /* 空き状況ボード */
  .day{margin-bottom:14px; border:2px solid #ffe2ef; border-radius:18px; padding:12px 14px; background:#fff8fb;}
  .day .dhead{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
  .ddate{font-size:17px; font-weight:800; color:#c96aa0;}
  .roombadge{font-size:16px; font-weight:800; color:#fff; padding:6px 16px; border-radius:999px; letter-spacing:.02em;}
  body.editing .roombadge{display:none !important;}
  .roominput{
    display:none; font-family:inherit; font-size:15px; font-weight:700; color:#7a5d6c;
    border:2px solid #ffe2ef; border-radius:10px; padding:7px 12px; background:#fff; outline:none; min-width:0; flex:1;
  }
  body.editing .roominput{display:inline-block;}
  .roominput:focus{border-color:#ff9ec6;}
  #roomLegend{display:none; flex-wrap:wrap; gap:10px; margin-bottom:16px;}
  .legchip{display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:800; color:#8a6b7a; background:#fff6fb; border:1.5px solid #ffe2ef; padding:6px 14px; border-radius:999px;}
  .legdot{width:13px; height:13px; border-radius:50%; display:inline-block;}

  .slotlist{display:flex; flex-direction:column; gap:8px;}
  .srow{display:flex; align-items:center; gap:8px;}
  .srow .time{
    flex:1; min-width:0; font-family:inherit; font-size:16px; font-weight:700; color:#7a5d6c;
    border:2px solid transparent; border-radius:12px; padding:11px 6px; background:transparent; outline:none;
  }
  body.editing .srow .time{border-color:#ffe2ef; background:#fff; padding:11px 12px;}
  .srow .time:focus{border-color:#ff9ec6;}
  .srow .stbtn{
    border:none; font-family:inherit; font-weight:800; font-size:15px;
    padding:11px 0; border-radius:12px; flex:none; width:84px; color:#fff; pointer-events:none;
  }
  body.editing .srow .stbtn{pointer-events:auto; cursor:pointer;}
  .stbtn.open{background:#3a93e0;}
  .stbtn.full{background:#ec5a5a;}
  .srow .del{
    border:none; background:#f3ecef; color:#b89aa6; cursor:pointer; font-size:18px; font-weight:800;
    width:42px; height:42px; border-radius:10px; flex:none; line-height:1; display:none;
  }
  body.editing .srow .del{display:block;}
  .srow .del:hover{background:#ffd9d9; color:#e05a5a;}
  .addslot{
    width:100%; margin-top:10px; border:2px dashed #ffc2e0; background:#fff6fb; color:#e8569a;
    font-family:inherit; font-weight:800; font-size:14px; padding:12px; border-radius:12px; cursor:pointer; display:none;
  }
  body.editing .addslot{display:block;}
  .addslot:hover{background:#ffeaf5;}

  /* 出勤日の追加・削除（編集モードのみ） */
  .daydel{display:none; border:none; background:transparent; color:#caa; cursor:pointer; font-size:12px; font-weight:700; margin-left:auto; padding:4px 6px; white-space:nowrap;}
  body.editing .daydel{display:inline-block;}
  .daydel:hover{color:#e05a5a;}
  .addday{display:none; margin-top:16px; gap:8px; flex-wrap:wrap; align-items:center;}
  body.editing .addday{display:flex;}
  .addday-date{font-family:inherit; font-size:15px; border:2px solid #ffe2ef; border-radius:10px; padding:9px 12px; outline:none; color:#7a5d6c; background:#fff;}
  .addday-date:focus{border-color:#ff9ec6;}
  .addday-btn{border:none; background:#ff7ab5; color:#fff; font-family:inherit; font-weight:800; font-size:14px; padding:11px 18px; border-radius:999px; cursor:pointer;}
  .addday-btn:hover{background:#ff5fa6;}

  /* ページ種別ラベル */
  .pagetag{
    position:fixed; top:10px; left:50%; transform:translateX(-50%);
    color:#fff; font-size:12px; font-weight:800; padding:7px 18px; border-radius:999px;
    z-index:9; box-shadow:0 4px 12px rgba(0,0,0,.18);
  }
  .pagetag.view{background:rgba(255,95,166,.95);}
  .pagetag.edit{background:rgba(47,127,209,.95);}

  /* 編集ページの案内バナー */
  .editguide{
    background:#eaf4ff; border:2px solid #b7d8f5; color:#2f7fd1; border-radius:18px;
    padding:14px 16px; margin-bottom:18px; font-size:14px; font-weight:700; line-height:1.8;
  }
  .editguide b{color:#1d6fc0;}

  footer{text-align:center; font-size:12px; color:#b89ab0; margin-top:24px;}

  /* スマホ最適化 */
  @media (max-width:430px){
    .wrap{padding:26px 14px 0;}
    .card{padding:20px 16px; border-radius:22px;}
    .pname{font-size:27px;}
    .card h2{font-size:19px;}
    .hime-title{font-size:27px;}
    .hime-sub{font-size:12.5px;}
    .day{padding:11px 12px;}
    .srow .time{font-size:15px;}
    .pagetag{font-size:11px; padding:6px 14px;}
  }