/*
      ConcreteCMS HTMLブロック直貼り想定。
      Google Fontsを使う場合は下の @import を有効化してください。
    */
    /* @import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap'); */

    :root {
      --kk-font-size: 25px;
      --kk-line-height: 2.0;
      --kk-letter-spacing: 0.08em;
      --kk-max-width: 34em;
      --kk-bg: #fffdf7;
      --kk-text: #202020;
      --kk-highlight-bg: #fff2a8;
      --kk-highlight-text: #111111;
      --kk-border: #ded7c9;
      --kk-muted: #666666;
      --kk-accent: #6f8f5f;
      --kk-accent-dark: #405c35;
      --kk-font-family: "BIZ UDPGothic", "BIZ UDゴシック", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    }

    #kakomukun {
      color: #222;
      font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", system-ui, sans-serif;
      line-height: 1.8;
    }

    #kakomukun * { box-sizing: border-box; }

    #kakomukun .kk-wrap {
      max-width: 1120px;
      margin: 0 auto;
      padding: 24px 16px 48px;
    }

    #kakomukun section {
      margin: 0 0 28px;
      padding: 22px;
      border: 1px solid var(--kk-border);
      border-radius: 18px;
      background: #ffffff;
      box-shadow: 0 8px 24px rgba(60, 48, 24, 0.06);
    }

    #kakomukun .hero {
      background:
        radial-gradient(circle at top left, rgba(255, 242, 168, 0.65), transparent 34%),
        linear-gradient(135deg, #fffdf7, #f6f1e7);
    }

    #kakomukun h1,
    #kakomukun h2,
    #kakomukun h3 {
      line-height: 1.4;
      margin: 0 0 12px;
    }

    #kakomukun h1 {
      font-size: clamp(2rem, 5vw, 3.2rem);
      letter-spacing: 0.05em;
    }

    #kakomukun h2 {
      font-size: clamp(1.35rem, 3vw, 2rem);
      border-left: 6px solid var(--kk-accent);
      padding-left: 12px;
    }

    #kakomukun p { margin: 0 0 12px; }

    #kakomukun .lead {
      font-size: 1.08rem;
      color: #333;
    }

    #kakomukun .badges,
    #kakomukun .row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 12px 0;
    }

    #kakomukun .badge {
      display: inline-flex;
      align-items: center;
      padding: 6px 10px;
      border: 1px solid var(--kk-border);
      border-radius: 999px;
      background: rgba(255,255,255,.78);
      color: #333;
      font-size: .9rem;
    }

    #kakomukun .seta {
      margin-top: 16px;
      padding: 14px 16px;
      border-left: 5px solid var(--kk-accent);
      border-radius: 12px;
      background: #f7f7ef;
      color: #333;
    }

    #kakomukun .seta strong { color: var(--kk-accent-dark); }

    #kakomukun .grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    #kakomukun .card {
      padding: 16px;
      border: 1px solid var(--kk-border);
      border-radius: 14px;
      background: #fff;
    }

    #kakomukun .card small {
      display: block;
      color: var(--kk-muted);
      line-height: 1.6;
    }

    #kakomukun button,
    #kakomukun .button {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      min-height: 42px;
      padding: 10px 16px;
      border: 0;
      border-radius: 999px;
      background: var(--kk-accent-dark);
      color: #fff;
      font-weight: 700;
      text-decoration: none;
      cursor: pointer;
    }

    #kakomukun button.secondary {
      background: #ece8df;
      color: #222;
      border: 1px solid var(--kk-border);
    }

    #kakomukun button.ghost,
    #kakomukun button.chip {
      background: #fff;
      color: var(--kk-accent-dark);
      border: 1px solid var(--kk-accent);
    }

    #kakomukun button:focus-visible,
    #kakomukun .kk-token:focus-visible,
    #kakomukun input:focus-visible,
    #kakomukun select:focus-visible,
    #kakomukun textarea:focus-visible {
      outline: 3px solid #5b9dd9;
      outline-offset: 3px;
    }

    #kakomukun textarea {
      width: 100%;
      min-height: 180px;
      resize: vertical;
      padding: 14px;
      border: 1px solid var(--kk-border);
      border-radius: 14px;
      font-size: 16px;
      line-height: 1.8;
      font-family: inherit;
    }

    #kakomukun .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: end;
      margin: 14px 0;
      padding: 14px;
      border: 1px solid var(--kk-border);
      border-radius: 14px;
      background: #faf8f2;
    }

    #kakomukun .control {
      display: grid;
      gap: 4px;
      min-width: 150px;
      flex: 1 1 150px;
    }

    #kakomukun .control label {
      font-size: .85rem;
      color: var(--kk-muted);
      font-weight: 700;
    }

    #kakomukun .control input,
    #kakomukun .control select {
      width: 100%;
    }

    #kakomukun .output-wrap {
      border: 1px solid var(--kk-border);
      border-radius: 16px;
      background: var(--kk-bg);
      overflow: hidden;
    }

    #kakomukun .kk-output {
      min-height: 220px;
      max-width: var(--kk-max-width);
      margin: 0 auto;
      padding: 24px 20px;
      background: var(--kk-bg);
      color: var(--kk-text);
      font-family: var(--kk-font-family);
      font-size: var(--kk-font-size);
      line-height: var(--kk-line-height);
      letter-spacing: var(--kk-letter-spacing);
      word-break: break-word;
      overflow-wrap: anywhere;
    }

    #kakomukun .kk-token {
      display: inline-block;
      margin: 0 0.08em;
      padding: 0 0.08em;
      border-radius: 0.25em;
      cursor: pointer;
      transition: transform 80ms ease, background-color 80ms ease, color 80ms ease, box-shadow 80ms ease;
    }

    #kakomukun .kk-token:hover,
    #kakomukun .kk-token:focus,
    #kakomukun .kk-token.is-active,
    #kakomukun .kk-token.is-current {
      background: var(--kk-highlight-bg);
      color: var(--kk-highlight-text);
      transform: translateY(-0.08em);
      box-shadow: 0 0.12em 0.3em rgba(0,0,0,.15);
    }

    #kakomukun .kk-output.kk-bionic .kk-token .kk-bold {
      font-weight: 700;
    }

    #kakomukun .kk-space { white-space: pre-wrap; }

    #kakomukun .status,
    #kakomukun .note {
      color: var(--kk-muted);
      font-size: .9rem;
    }

    #kakomukun .status {
      min-height: 1.5em;
      margin: 8px 0;
    }

    #kakomukun .feedbackMini {
      padding: 14px;
      border: 1px solid var(--kk-border);
      border-radius: 14px;
      background: #faf8f2;
      margin: 12px 0 18px;
    }

    #kakomukun .star {
      background: #fff;
      color: #222;
      border: 1px solid var(--kk-border);
    }

    #kakomukun .star.is-selected {
      background: var(--kk-accent-dark);
      color: #fff;
    }

    #kakomukun .feedbackGrid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
    }

    #kakomukun .feedbackBlock {
      padding: 14px;
      border: 1px solid var(--kk-border);
      border-radius: 14px;
      background: #fff;
    }

    #kakomukun .checks {
      display: grid;
      grid-template-columns: repeat(4, minmax(130px, 1fr));
      gap: 8px 10px;
      margin: 10px 0 18px;
    }

    #kakomukun .checks label {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      min-height: 42px;
      padding: 8px 10px;
      border: 1px solid var(--kk-border);
      border-radius: 12px;
      background: #fff;
      line-height: 1.5;
      cursor: pointer;
      text-align: left;
    }

    #kakomukun .checks input[type="checkbox"] {
      flex: 0 0 auto;
      width: 1.05em;
      height: 1.05em;
      margin: 0;
    }

    @media (max-width: 900px) {
      #kakomukun .checks {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
      }
    }

    @media (max-width: 760px) {
      #kakomukun section { padding: 18px; }
      #kakomukun .grid,
      #kakomukun .checks {
        grid-template-columns: 1fr;
      }
      #kakomukun .controls { display: grid; }
      #kakomukun .kk-output { padding: 18px 14px; }
      #kakomukun button { width: 100%; }
      #kakomukun .row button { width: auto; flex: 1 1 auto; }
    }

/* β1.0.8: アイコン選択・色選択・サジェスト */
#kakomukun .kk-guided-tools{display:grid;gap:14px;margin:14px 0}
#kakomukun .kk-suggestion-box{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--kk-border);border-radius:16px;background:#f7f7ef}
#kakomukun .kk-suggestion-icon{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;border-radius:999px;background:#fff;border:1px solid var(--kk-border);font-size:1.35rem}
#kakomukun .kk-suggestion-box p{margin:4px 0 0;color:var(--kk-muted)}
#kakomukun .kk-icon-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:10px}
#kakomukun .kk-icon-card{flex-direction:column;align-items:flex-start;min-height:130px;padding:14px;border-radius:16px;background:#fff;color:#222;border:1px solid var(--kk-border);text-align:left}
#kakomukun .kk-icon-card:hover,#kakomukun .kk-icon-card:focus-visible,#kakomukun .kk-icon-card.is-selected{background:#f7f7ef;border-color:var(--kk-accent);box-shadow:0 .25rem .75rem rgba(64,92,53,.13)}
#kakomukun .kk-icon{font-size:1.6rem}
#kakomukun .kk-icon-title{font-weight:700;font-size:1rem}
#kakomukun .kk-icon-desc{color:var(--kk-muted);font-size:.86rem;line-height:1.55}
#kakomukun .kk-details{border:1px solid var(--kk-border);border-radius:16px;background:#fff;padding:12px 14px}
#kakomukun .kk-details summary{cursor:pointer;font-weight:700;color:var(--kk-accent-dark)}
#kakomukun .kk-choice-panel{display:grid;gap:12px;padding:14px;border:1px solid var(--kk-border);border-radius:16px;background:#faf8f2}
#kakomukun .kk-choice-group{display:grid;gap:8px}
#kakomukun .kk-choice-label{font-weight:700;color:#333}
#kakomukun .kk-choice-row{display:flex;flex-wrap:wrap;gap:8px}
#kakomukun .kk-choice{background:#fff;color:#222;border:1px solid var(--kk-border);min-height:40px;padding:8px 12px}
#kakomukun .kk-choice.is-selected{background:var(--kk-accent-dark);color:#fff;border-color:var(--kk-accent-dark)}
#kakomukun .swatch{display:inline-block;width:1.1em;height:1.1em;border-radius:999px;border:1px solid rgba(0,0,0,.2)}
#kakomukun .swatch.cream{background:#fffdf7}
#kakomukun .swatch.light{background:#fff}
#kakomukun .swatch.dark{background:#222}
#kakomukun .swatch.yellow{background:#fff2a8}
#kakomukun .swatch.blue{background:#d8efff}
#kakomukun .swatch.green{background:#e5ffd8}
#kakomukun .swatch.pink{background:#ffe1ef}
#kakomukun .kk-hidden-controls{display:none!important}
@media(max-width:900px){#kakomukun .kk-icon-grid{grid-template-columns:repeat(2,minmax(150px,1fr))}}
@media(max-width:560px){#kakomukun .kk-icon-grid{grid-template-columns:1fr}}